React nicht aktualisieren Attribut beim Neu-Rendering

Question

Ich habe ein React-Element mit einem Namen Attribut und Kind Text, die beide aus dem gleichen Wert in Requisiten genommen werden.

Wenn eine Komponente mit einem anderen prop Wert Reagieren wieder Rendering, nur das Kind Text aktualisiert wird, aber der Name Attribut bleibt gleich:

var Inner = React.createClass({ 
    render: function() { 
     var name = this.props.name; 
     return (<div name={name}>{name}</div>); 
    } 
}); 

React.render(<Inner name="red"/>, document.getElementById('outer')); 
// element is now <div name="red" data-reactid=".0">red</div> 

React.render(<Inner name="green"/>, document.getElementById('outer')); 
// element is now <div name="red" data-reactid=".0">green</div> 

Wie Sie sehen können, nach dem zweiten Aufruf React.render , das Attribut name ist immer noch rot. (siehe http://jsfiddle.net/chyp9mxL/)

Dieses Problem kann durch Hinzufügen einer key={name} in der Render-Funktion behoben werden, aber ich sehe nicht, warum ich muss. Werden Schlüssel nicht benötigt, wenn wir mehrere Komponenten haben? Wir haben nur einen hier.

Answer 1

Liegt das daran, dass divname nicht als gültige Stütze erkennt? Ich erinnere mich, dass das Übergeben illegaler Requisiten an native DOM-Elemente zu unerwarteten Ergebnissen führt.

Das Hinzufügen key als eine Stütze hätte einfach div eine Identität gegeben. Daher könnte React dieses Kind identifizieren und den Wert korrekt aktualisieren.

Der Schlüssel hier ist nicht alles zu verstehen, in der DOM eine Darstellung hat in React „Virtual DOM“ und, da die direkte Manipulationen des DOM (wie ein Benutzer einen Wert oder einen jQuery-Plugin Ändern hören ein Element) werden von React unbemerkt. eindeutige und konstante Schlüssel führen dazu, dass React den DOM Knoten einer Komponente erneut generiert, wenn der Schlüssel nicht konstant ist (und nicht geparkten Status im Knoten verliert) oder einen DOM-Knoten wiederverwendet rendern Sie eine weitere Komponente, wenn der Schlüssel nicht eindeutig ist (und seinen Status an diese andere Komponente binden).

Sagt this Artikel. Aber es ist wirklich seltsam! Ich hoffe, dass jemand eine richtige Erklärung findet.

Answer 2

Da div keine Reaktionskomponente ist, können Sie nur Requisiten übergeben, um Komponenten zu reagieren! Sie müssen lesen Sie mehr über Reagieren Prop, here ist Reagieren Requisiten Dokumente.