Reagiere nativen Navigator und übergebe die Elternkomponente zum Kind.

Question

Ich weiß nicht, wie ich einen Verweis auf die TripList-Instanz an die AddTrip-Komponente weiterleiten soll. Ich muss etwas tun, um TripList zu signalisieren, dass die Daten nach dem Hinzufügen einer neuen Reise aktualisiert werden sollen.

In meinem render() Methode, innen <Navigator> ich habe:

if (route.index === 1) { 
    return <TripList 
    title={route.title} 
    onForward={() => { 
     navigator.push({ 
      title: 'Add New Trip', 
      index: 2, 
     }); 
    }} 
    onBack={() => { 
     if (route.index > 0) { 
      navigator.pop(); 
     } 
    }} 
/> 
} else { 
    return <AddTrip 
    styles={tripStyles} 
    title={route.title} 
    onBack={() => { navigator.pop(); }} 
    /> 
} 

Allerdings, wenn ich onBack() in AddTrip nennen, nach einer Reise Hinzufügen möchte ich Refresh() aufzurufen, auf traurige Mitteilung so die Neue Reise wird angezeigt. Wie kann ich die Dinge am besten strukturieren, um das zu tun? Ich vermute, ich muss TripList irgendwie zu AddTrip übergeben und dann kann ich refresh() aufrufen, bevor ich onBack() anrufe.

Answer 1

So funktioniert React nicht. Sie übergeben keine Instanzen einer Komponente, sondern übergeben die Daten über props an Ihre Komponente. Und Ihre Komponente AddTrip sollte eine weitere props empfangen, die eine Funktion ist, die aufgerufen wird, wenn eine Auslösung hinzugefügt wird.

Lassen Sie mich dies anhand eines Codebeispiels veranschaulichen. So sollte Ihr Code letztendlich nicht sein, aber es wird veranschaulichen, wie Sie die Daten außerhalb Ihrer Komponenten speichern.

// Placed at the top of the file, not in a class or function. 
let allTrips = []; 

// Your navigator code. 
if (route.index === 1) { 
    return <TripList 
    trips={allTrips} 
    title={route.title} 
    onForward={() => { 
     navigator.push({ 
      title: 'Add New Trip', 
      index: 2, 
     }); 
    }} 
    onBack={() => { 
     if (route.index > 0) { 
      navigator.pop(); 
     } 
    }} /> 

} else { 
    return <AddTrip 
    styles={tripStyles} 
    title={route.title} 
    onAdd={(tripData) => { 
     allTrips = [...allTrips, tripData]; 
    }} 
    onBack={() => { navigator.pop(); }} /> 
} 

Wie Sie sehen können, die Logik über das Hinzufügen und die Reisen zu finden, kommt von der übergeordneten Komponente, die der Navigator ist in diesem Fall. Sie werden auch feststellen, dass wir den Inhalt von allTrips rekonstruieren, das ist wichtig, da React auf dem Konzept der Unveränderlichkeit basiert.

Sie müssen von Redux gehört haben, das ein System ist, das allen Ihren Komponenten ermöglicht, mit einem globalen Speicher zu diskutieren, von dem Sie Ihren gesamten Anwendungsstatus abrufen und speichern. Es ist ein bisschen komplexer, weshalb ich es nicht als Beispiel dafür benutzt habe.

Ich werde fast das Wichtigste vergessen! Du musst deiner Komponente nicht signalisieren, dass sie erfrischt werden muss, die Magie von React sollte sich darum kümmern!