Datenmodell in untergeordnete Komponente

Question

Ich möchte wissen, was die beste Praxis für eine Kommunikation zwischen Eltern/Kind-Komponenten ist. Ich habe diese blogpost über Kommunikation und Komponenten gelesen, aber habe nicht die richtige Antwort für mein Problem gefunden.

Folgende Komponenten werden berücksichtigt. Meine übergeordnete Komponente ist eine Liste, die mehrere Aufgaben (untergeordnete Komponente) von Objekten in der übergeordneten Komponente rendert.

Also meine Fragen sind:

1. ist es am beste Praxis, das Objekt zu jeder Aufgabe Komponente zu übergeben?
2. Wenn ein Wert in der Task-Komponente geändert wurde, wie weiß die Elternkomponente darüber? Weil die Eltern über die Informationen aller Kinder Bescheid wissen sollten.

Also ist das ein richtiges Muster zu verwenden?

In meinem Elternkomponente habe ich dies in der Render-Funktion:

<Task key={index} taskdata={taskobj} /> 

Meine Aufgabe Kind Komponente wie folgt aussieht:

render() { 
    return (
     <input type="text" name="wunsch" defaultValue={this.props.task.title}/> 
); 
} 

Also, wenn der Wert des Eingabefeldes wird sich ändern, tut Taskobj in der übergeordneten Komponente auch ändern? In diesem Beispiel Nr. Aber was wäre das richtige Muster hier?

Answer 1

Grundsätzlich, wenn Sie wollen von den Eltern Sie props verwenden, um Kinder Informationen weitergeben, wenn Sie Informationen von Kind zu Eltern übergeben wollen übergeben Sie eine Funktion, um ein Kind als prop und dann anrufen, wenn Sie einen Elternteil aktualisieren .

können Sie mehr in official docs

Lesen Sie auch Sie Reflux einen Blick darauf werfen können. Eine einfache Bibliothek für unidirektionale Datenfluss-Architektur inspiriert von ReactJS Flux

Answer 2

In Reaktion, fließen Daten einen Weg

Ich war nicht wirklich bewusst, dieses Konzept reagieren. Also nach dem Lesen dieser link in der ReactJS Doc entschied ich mich für die onChange/setState() Weg, da ReactLink bereits veraltet ist.

Wenn also eine Änderung im Modell in der Child-Komponente passiert, rufe ich eine Methode in der Eltern-Komponente auf, um meine Daten zu aktualisieren (setState).