Dans Astro, j'ai essayé de réécrire le composant Preact de fonction en classe

Question

Voici un référentiel de démonstration montrant comment utiliser Preact avec Astro

Je n'afficherai ici que les extraits de code pertinents. Dans le fichier de la page astro, le composant preact est utilisé comme suit

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

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

Dans ce référentiel, preact est défini comme suit :

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

Maintenant, je souhaite réécrire ce composant dans une classe :

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

Le problème c'est que lorsque je clique sur + ou - rien ne se passe, il semble que 信号 ne fonctionne plus. Je dois donc faire quelque chose de fondamentalement faux (notez que je suis un React NooP !) Toute aide serait grandement appréciée !

Answer 1

Le traçage du signal ne peut pas être effectué via un tel constructeur. Vous devez passer aux fonctions fléchées et manipuler directement le signal entrant :

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