Reagieren - Kommunikation zwischen Komponenten (für Anfänger)

Question

Ich bin relativ neu in React JS. Vor ein paar Wochen habe ich To-Do-Liste App in JS, jQuery erstellt und jetzt werde ich es mit Hilfe von React, nur um meinen Standpunkt zu ändern und üben React.

Ich habe einige Komponenten (Geschwister) in verschiedenen Dateien und eine übergeordnete Komponente - App, Komponenten:

App: - Navigation - Aufgabenliste - Hinzufügen Aufgabe - Footer

Wie kann Meine Navigationskomponente kommuniziert mit der Aufgabenlistenkomponente? Um genauer zu sein möchte ich etwas wie globale Variable selectedDay haben und es in allen Komponenten verwenden. Wenn Benutzer in Navigationskomponente einzelnen Tag, zum Beispiel Sonntag, wählen, möchte ich "Sonntag" in dieser Variable speichern und später in der Aufgabenliste verwenden (dies ist natürlich ein Beispiel für Daten). Meine Frage ist , wie man Daten in der ersten Komponente speichert und sie in einem anderen benutzt?

Sollte ich den Status für diese Zwecke verwenden? Ich habe darüber nachgedacht, den Ausgangszustand in der übergeordneten (App) Komponente -> selectedDay: "montag"/default/festzulegen und später durch die Navigationskomponente zu aktualisieren und in der Aufgabenliste zu verwenden. Kannst du mir bitte helfen? Ich werde dankbar sein!

Answer 1

Dafür gibt es zwei Lösungen.

1- Verwenden Sie eine Bibliothek, die einen globalen Zustand behandelt, wie Redux (wie FurkanO sagte). Auf diese Weise werden Ihre "großen Komponenten" (auch Container genannt) mit dem globalen Status Ihrer Anwendung verbunden und durch Aktionen aktualisiert. Aktionen sind eine Art von Ereignissen mit einem Typ und manchmal einer Nutzlast, die von einem Reduzierer abgefangen werden und eine Statusaktualisierung auslösen.

2- Verwenden Sie den Status des untersten gemeinsamen übergeordneten Elements der Komponenten, die angezeigt werden sollen.

Basisbeispiel für 2-: Übergeordnete Komponente enthält Navigation & TaskList.

class Parent extends Component { 
    state = { 
    selectedDay: defaultDay, 
    } 

    setDay = (selectedDay) => { 
    this.setState({ selectedDay }); 
    } 

    render() { 
    const { selectedDay } = this.state; 
    return (
     <div> 
     <Navigation setDay={this.setDay} /> 
     <TaskList selectedDay={selectedDay} /> 
     </div> 
    ); 
    } 
} 

Dann verwenden Sie einfach diese setDay-Funktion in Ihrer Navigationskomponente, um den Status in der übergeordneten Komponente festzulegen. Auf diese Weise erhält Ihre TaskList den neuen Wert über ihre Requisiten. Diese Methode hat ihre Grenzen (es ist meiner Meinung nach nicht gut skalierbar).

Hoffnung, die geholfen hat. Bitte sagen Sie mir, ob das für Sie nicht klar ist.

Answer 2

Was Sie brauchen, ist Redux. Es bietet Ihnen einen globalen Zustandsbaum, der ein Objekt ist, eine Möglichkeit, es zu manipulieren und vor allem, wenn Ihre Zustandsbaumstruktur Ihre Komponenten neu rendert. So sind Ihre Komponenten immer auf dem neuesten Stand mit dem Statusbaum.