Die übergabe von Daten zwischen zwei Geschwister React.js Komponenten

Habe ich zwei Instanzen einer Komponente (ein Suchfeld) auf einer Seite mit einer zweiten Komponente (der Knopf, der server ruft) zwischen Ihnen, wie eine solche:

JS:

ReactDOM.render(
    <table>
    <tbody>
        <tr>
            <td><CardSearch items={ cards } placeholder="Card 1 here" /></td>
            <td><RunOnServer url="py/comparecards" /></td>
            <td><CardSearch items={ cards } placeholder="Card 2 here"/></td>
        </tr>
    </tbody>
    </table>,
    document.getElementById('root')
);

Alles was ich will zu tun ist, übergeben Sie einen parameter jeweils unverändert, von der CardSearch Felder, um die RunOnServer-Taste, aber ich will verdammt sein, wenn es einfach ist. Nach dieser Ich kann diesen verwenden.Zustand.var als Stütze, sondern tun, das mir 'nicht definiert.Zustand.var', wenn der code kompiliert statt. Reagieren die offiziellen docs sind nicht groß; Sie sagen mir einfach zu gehen Flux selbst, das scheint doof... ich sollte nicht brauchen eine ganze neue Architektur an eine einfache variable, die von einer Komponente zur anderen.

Ich habe auch versucht, die lokale vars in der Datei, die das rendering, aber Sie bekommen, der an die Komponenten als Requisiten und die Sie nicht ändern können, Requisiten in einer Komponente.

  • Haben Sie in Betracht gezogen, die Schaffung eines top-level (d.h. Elternteil) Komponente, die verwaltet shared-Variablen?
  • Ich bin mir nicht sicher, ob ich bereits so etwas wie, dass... index.js enthält den code, den ich oben gepostet (und nichts anderes außer die Quelle des 'Karten' var und der import/Anforderungen), aber index ist nicht eine Komponente, würde das funktionieren?
InformationsquelleAutor IronWaffleMan | 2016-01-12
  1. 12

    Erstellte ich eine jsfiddle mit einem Beispiel, wie teilen sich eine variable zwischen zwei Komponenten mit einem übergeordneten Komponente.

    class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {shared_var: "init"};
    }

    updateShared(shared_value) {
        this.setState({shared_var: shared_value});
    }

    render() {
        return (
            <div>
                <CardSearch shared_var={this.state.shared_var} updateShared={this.updateShared} />
                <RunOnServer shared_var={this.state.shared_var} updateShared={this.updateShared} />
                <div> The shared value is {this.state.shared_var} </div>
            </div>
        );
    }
}

class CardSearch extends React.Component {
    updateShared() {
        this.props.updateShared('card');
    }

    render() {
        return (
            <button onClick={this.updateShared} style={this.props.shared_var == 'card' ? {backgroundColor: "green"} : null} >
            card
            </button>
        );
    }
}

class RunOnServer extends React.Component {
    updateShared() {
        this.props.updateShared('run');
    }

    render() {
        return (
            <button onClick={this.updateShared} style={this.props.shared_var == 'run' ? {backgroundColor: "green"} : null}>
            run
            </button>
        );
    }
}


ReactDOM.render(
  <Parent/>,
  document.getElementById('container')
);
    • Danke, das hat geklappt. Ich habe zwei updateShared Funktionen, eine für jeden CardSearch Komponente, die ich habe, und Sie aktualisieren var1 oder var2 beziehungsweise. Ein trick war, ich rief diese.Requisiten.updateShared(dies.Zustand.var) gleich nach diesem.setState({string: var}), aber die var übergeben wird, war die alte, nicht aktualisierte ich war die Einstellung des Staates mit. Also habe ich bestanden.Requisiten.updateShared(var) als callback zu dieser.setState. Nicht sicher, warum es war nicht die Aktualisierung der Status-Wert nach dem setState nennen obwohl...
    • Ich würde gerne sehen, diese Antwort neu geschrieben mit ES6-Klassen, anstatt zu Reagieren.createClass. Es ist nur leicht störend. Naja, ich denke, ich könnte es selbst tun.
    InformationsquelleAutor Mark
Schreibe einen Kommentar