Di Astro, saya cuba menulis semula komponen Preact dari fungsi ke kelas
P粉006540600
P粉006540600 2024-01-16 23:12:28
0
1
463

Berikut ialah repositori demo yang menunjukkan cara menggunakan Preact dengan Astro

Saya hanya akan menunjukkan coretan kod yang berkaitan di sini. Dalam fail halaman astro, komponen preact digunakan seperti berikut

---
...
const count = signal(0);
...
---

<Counter count={count} client:visible>
    <h1>Hello, Preact 1!</h1>
</Counter>

Dalam repositori ini, preact ditakrifkan seperti berikut:

export default function Counter({ children, count }) {
    const add = () => count.value++;
    const subtract = () => count.value--;

    return (
        <>
            <div class="counter">
                <button onClick={subtract}>-</button>
                <pre>{count}</pre>
                <button onClick={add}>+</button>
            </div>
            <div class="counter-message">{children}</div>
        </>
    );
}

Sekarang, saya mahu menulis semula komponen ini ke dalam kelas:

export default class Counter extends Component {
  constructor(props: any) {
    super(props);
    this.add = this.add.bind(this);
    this.subtract = this.subtract.bind(this);
  }

  add() {
    (this.props as any).count.value++;
  }

  subtract() {
    (this.props as any).count.value--;
  }

  render({ children, count }: any) {
    return (
      <>
        <div class="counter">
          <button onClick={this.subtract}>-</button>
          <button onClick={this.add}>+</button>
        </div>
        <div class="counter-message">{children}</div>
      </>
    );
  }
}

Masalahnya, apabila saya klik + atau - tiada apa yang berlaku, nampaknya 信号 tidak berfungsi lagi. Jadi saya pasti melakukan sesuatu yang salah secara asasnya (perhatikan, saya React NooP!) Sebarang bantuan amat dihargai!

P粉006540600
P粉006540600

membalas semua(1)
P粉111641966

Pengesanan isyarat tidak boleh dilakukan melalui pembina sedemikian. Anda perlu bertukar kepada fungsi anak panah dan memanipulasi isyarat masuk secara langsung:

export default class Counter extends Component {
  add = () => {
    this.props.count.value++;
  }

  subtract = () => {
    this.props.count.value--;
  }

  render({ children, count }: any) {
    return (
      <>
        <div class="counter">
          <button onClick={this.subtract}>-</button>
          <button onClick={this.add}>+</button>
        </div>
        <div class="counter-message">{children}</div>
      </>
    );
  }
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan