Dans Astro, j'ai essayé de réécrire le composant Preact de fonction en classe
P粉006540600
P粉006540600 2024-01-16 23:12:28
0
1
462

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 !

P粉006540600
P粉006540600

répondre à tous(1)
P粉111641966

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>
      </>
    );
  }
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal