Detaillierte Erklärung zum Übergeben von Werten zwischen React-Hook-Komponenten (mithilfe von ts)

Vom Vater zum Sohn

Übergeben Sie Werte über Requisiten und verwenden Sie useState, um den Statuswert zu steuern

In der übergeordneten Komponente Father.tsx:

In der untergeordneten Komponente Child.tsx:

Anzeigeeffekt:

Vom Sohn zum Vater

Genau wie bei React wird die Rückruffunktion an die untergeordnete Komponente übergeben und der Status der übergeordneten Komponente durch Empfangen des Rückgabewerts der untergeordneten Komponente aktualisiert.

Übergeordnete Komponente in Father.tsx:

Untergeordnete Komponente in Child.tsx:

Anzeigeeffekt:

Optimierte Version der Übertragung vom Kind zum Elternteil, bei der useCallback zum Speichern von Funktionen verwendet wird, die Ereignisse verarbeiten.

Übergeordnete Komponente in Father.tsx:

Untergeordnete Komponente in Child.tsx:

Komponenten über mehrere Ebenen hinweg (von übergeordnetem Element zu untergeordnetem Element)

Verwenden Sie useContext, um Werte zu übergeben, ähnlich wie bei React's Context

Schritte:

Erstellen Sie einen Kontext und verknüpfen Sie mit context.provider die Komponente, die den Wert übergeben muss, um den Kontext einzuführen, und mit useContext den Wert abzurufen

Übergeordnete Komponente in Father.tsx:

Untergeordnete Komponente in Child.tsx:

Enkelkomponente in Sun.tsx:

Anzeigeeffekt

Damit ist dieser Artikel zum Übergeben von Werten zwischen React-Hook-Komponenten (mit ts) abgeschlossen. Weitere Informationen zum Übergeben von Werten zwischen React-Hook-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!