2017-09-06 3 views
0

Im Erstellen von einfachen Test React App.Exportieren von Variablen in Geschwisterelemente

Ich habe eine kleine Datenbank mit JS-Objekten gefüllt. Wenn Benutzer Typen in eine Suchleiste abfragen und die Eingabetaste drücken, exportiere ich this.state.form (string from searchbar) in eine Variable. Dann Iterate durch Datenbank und wenn ich den Namen eines Datensatzes gleich Formularvariable finde, möchte ich die Details dieses Objekts in einem div anzeigen.

Allerdings ist diese div-Komponente in einer anderen, Geschwister JS-Datei und ich kann nicht herausfinden, wie effektiv Variablen und ihre Werte zu Geschwister-Dateien ohne Redux exportieren.

Mit Pseudo-Code wäre es so etwas wie diese:

var isFound; 
var arrayNumber; 

// I iterate through the array of objects with for loop to find correct object and store "i" to arrayNumber and want to export it 
// If record is found i set isFound to true, otherwise to false 

In einer neuen Datei ich ein einfaches div machen, wo ich die folgenden

//if isFound is false 
<div>Not found</div> 
//if found 
<div>database[i].details</div> 

Antwort

0

versuchen zu tun, will Eltern Komponenten erstellen für diese 2 Komponenten. Zum Beispiel jetzt Ihre Struktur ist smth wie

<Component> 
    <Subcomponent /> 
    <Subcomponent /> 
    ... other content 
</Component> 

Sie es

<Component> 
    <ParentSubcomponent> 
    <Subcomponent /> 
    <Subcomponent /> 
    </ParentSubcomponent> 
    ... other content 
</Component> 

zu

ändern sollte und zu ParentComponent verlassen & Display mit Rückrufe für Subcomponents (ändern ParentComponent's Zustand auf Subcomponent onClick auf behandeln suchen Suchknopf, der zweite wird Subcomponent aufgrund der bereitgestellten Requisiten, die von ParentComponent's Zustand erhalten werden (eigentlich ist es Suchergebnis), wurden geändert, so speichern Sie Daten über die Suche & Anzeige Info in ParentSubcomponent's Zustand.

So einzige Quelle der Wahrheit ParentSubcomponent's Zustand sein wird, 1. Subcomponent Rückruf verwendet es mit dem Suchergebnis zu aktualisieren, 2. Subcomponent erhält Suchergebnis (von Staat) als Requisiten und Updates selbst.

+0

Scheint verwirrend und erzeugt eine Menge zusätzlichen Code. Ich wünschte, wir könnten es einfach exportieren und importieren, genauso wie wir Dateien importieren. Ich werde versuchen, die App neu zu erstellen, aber jetzt wünschte ich, ich wäre nicht stur und pedantiert mit purer Reaktion – BigPaws

Verwandte Themen