Di Astro, saya cuba menulis semula komponen Preact dari fungsi ke kelas

Question

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!

Answer 1

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>
      </>
    );
  }
}