In Astro habe ich versucht, die Preact-Komponente von Funktion zu Klasse umzuschreiben

Question

Hier ist ein Demo-Repository, das zeigt, wie man Preact mit Astro verwendet.

Ich werde hier nur relevante Codeschnipsel zeigen. In der Astro-Seitendatei wird die Preact-Komponente wie folgt verwendet

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

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

In diesem Repository ist preact wie folgt definiert:

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

Jetzt möchte ich diese Komponente in eine Klasse umschreiben:

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

Das Problem ist, wenn ich auf + oder – klicke, passiert nichts, es scheint, dass 信号 nicht mehr funktioniert. Ich muss also etwas grundlegend falsch machen (beachten Sie, dass ich ein React NooP bin!) Für jede Hilfe wäre ich sehr dankbar!

Answer 1

信号跟踪无法通过这样的构造函数进行。您需要切换到箭头函数并直接操作传入的信号：

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