React.js - Kommunikation zwischen gleichrangigen Komponenten

Ich bin neu zu Reagieren, und ich würde Sie gerne Fragen, wie eine Strategie in Frage, wie am besten, um eine Aufgabe durchzuführen, wobei Daten übertragen werden müssen, zwischen Geschwister-Komponenten.

Werde ich zunächst beschreiben Sie die Aufgabe:

Sagen, ich habe mehrere <select> Komponenten, die Kinder sind von einem einzigen Elternteil, geht die select-Boxen dynamisch, bestehend aus einem array. Jede box hat genau die gleichen Optionen verfügbar sind, in seinen ursprünglichen Zustand, aber sobald ein Benutzer eine bestimmte option in einer box, muss diese deaktiviert werden, als option in allen anderen Feldern bis es gelöst ist.

Hier ist ein Beispiel der in der gleichen (dummen) code. (Ich bin mit react-select als Kurzform für das erstellen der select-Boxen.)

In diesem Beispiel, die ich brauche, zu deaktivieren (ie, set disabled: true) die Optionen für "It' s my favorite" und "It' s my least favorite", wenn ein Benutzer wählt in einer select-box (und Sie loslassen, wenn ein Benutzer de-diese auswählt).

JS:

var React = require('react');
var Select = require('react-select');
var AnForm = React.createClass({
render: function(){
//this.props.fruits is an array passed in that looks like:
//['apples', 'bananas', 'cherries','watermelon','oranges']
var selects = this.props.fruits.map(function(fruit, i) {
var options = [
{ value: 'first', label: 'It\'s my favorite', disabled: false },
{ value: 'second', label: 'I\'m OK with it', disabled: false },
{ value: 'third', label: 'It\'s my least favorite', disabled: false }
];
return (
<Child fruit={fruit} key={i} options={options} />
);
});
return (
<div id="myFormThingy">
{fruitSelects}
</div>
)
}
});
var AnChild = React.createClass({
getInitialState: function() {
return {
value:'',
options: this.props.options
};
},
render: function(){
function changeValue(value){
this.setState({value:value});
}
return (
<label for={this.props.fruit}>{this.props.fruit}</label>
<Select
name={this.props.fruit}
value={this.state.value}
options={this.state.options}
onChange={changeValue.bind(this)}
placeholder="Choose one"
/>
)
}
});

Ist die Aktualisierung der untergeordneten Optionen erreicht man am besten durch die Weitergabe der Daten zurück bis zu den Eltern durch einen Rückruf? Sollte ich refs, um Zugriff auf die untergeordneten Komponenten in diesem callback? Hat eine redux reducer helfen?

Ich entschuldige mich für die Allgemeine Art der Frage, aber ich bin nicht, finden eine Menge von der Richtung, die auf den Umgang mit diesen sibling-zu-sibling-Komponente Interaktionen in einer unidirektionalen Weise.

Vielen Dank für jede Hilfe.

  • ja, ja, und ja, in einer anderen Weise; redux wird es einfacher, wie die Verwendung von globalen Variablen würde, weil, gut, das ist im Grunde, was es tut, aus der Perspektive der Komponente logic.
InformationsquelleAutor JMcClure | 2016-03-21
Schreibe einen Kommentar