Wie zu zwingen, wieder aufstecken auf React-Komponenten?

Was wahrscheinlich geschieht, ist, dass Reagieren denkt, dass nur ein MyInput (unemployment-duration) ist, die zwischen den macht. Als solche, die job-title wird nie ersetzt mit der unemployment-reason, das ist auch der Grund, warum die vordefinierten Werte sind vertauscht.

Reagieren, wenn nicht das diff, es wird bestimmt, welche Komponenten neu sind und welche alt sind, basierend auf Ihren key Eigenschaft. Wenn kein solcher Schlüssel ist im code bereitgestellt, generiert es seine eigenen.

Der Grund, warum der Letzte code-snippet, das Sie bieten funktioniert, weil Reagieren im wesentlichen zu ändern muss die Hierarchie aller Elemente, die unter der übergeordneten div und ich glaube, dass würde trigger ein neu-Rendern aller Kinder (das ist, warum es funktioniert). Hatte Sie Hinzugefügt, die span unten statt von oben, die Hierarchie der vorstehenden Elemente nicht ändern würde, und diese element würde nicht re-Rendern (und das problem würde weiterhin bestehen).

Hier ist, was die offizielle Reagieren, Dokumentation sagt:

Die situation wird komplizierter, wenn die Kinder gemischt, um (in den Suchergebnissen) oder wenn neue Komponenten werden Hinzugefügt, auf der Vorderseite der Liste (wie in Flüssen). In diesen Fällen, in denen die Identität und den Zustand jedes Kind muss gepflegt werden über render-Durchgängen, die Sie eindeutig identifizieren kann jedes Kind durch das zuweisen einer Taste.

Wenn Reagieren, bringt die ausgestanzten Kinder, es wird sichergestellt, dass jedes Kind mit Schlüssel nachbestellt werden (statt zu verändern) oder zerstört (statt wiederverwendet).

Sollten Sie in der Lage sein, dies zu beheben, indem Sie eine einzigartige key element sich entweder mit der übergeordneten div oder alle MyInput Elemente.

Beispiel:

render(){
    if (this.state.employed) {
        return (
            <div key="employed">
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div key="notEmployed">
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

ODER

render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput key="title" ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <MyInput key="reason" ref="unemployment-reason" name="unemployment-reason" />
                <MyInput key="duration" ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

Wenn jetzt Reagieren tut das diff, wird sehen, dass die divs anders sind und re-Rendern einschließlich aller seiner " Kinder (1. Beispiel). Im 2. Beispiel, das diff wird ein Erfolg auf job-title und unemployment-reason da Sie nun verschiedene Schlüssel haben.

Können Sie natürlich auch alle Schlüssel, die Sie wollen, solange Sie eindeutig sind.

Update August 2017

Für einen besseren Einblick in die Funktionsweise der Tasten Reagieren, empfehle ich das Lesen meiner Antwort auf Verständnis eindeutiger Schlüssel in React.js.

Update November 2017

Sollte dieses update habe geschrieben eine Weile her, aber mit string-literalen in ref ist jetzt veraltet. Zum Beispiel ref="job-title" sollten nun statt dessen werden ref={(el) => this.jobTitleRef = el} (zum Beispiel). Siehe meine Antwort auf Deprecation Warnung mit diesem.refs für mehr info.

InformationsquelleAutor Chris

Verwenden setState Ihrer Ansicht zu ändern employed Eigentum des Staates. Dieses ist zum Beispiel Reagieren render-engine.

 someFunctionWhichChangeParamEmployed(isEmployed) {
      this.setState({
          employed: isEmployed
      });
 }

 getInitialState() {
      return {
          employed: true
      }
 },

 render(){
    if (this.state.employed) {
        return (
            <div>
                <MyInput ref="job-title" name="job-title" />
            </div>
        );
    } else {
        return (
            <div>
                <span>Diff me!</span>
                <MyInput ref="unemployment-reason" name="unemployment-reason" />
                <MyInput ref="unemployment-duration" name="unemployment-duration" />
            </div>
        );
    }
}

InformationsquelleAutor Dmitriy