Problem mit Tastenbelegung für dynamische Kinder in React-Rails App

Question

Ich erstelle eine React App auf Rails und habe ein Problem in Bezug auf die Tastenbelegung für dynamische Kinder aufgetreten.

Nachfolgend finden Sie eine abgespeckte Kopie meines Code:

class Records extends React.Component { 
    render() { 
     var records = 
      this.props.data.map(function(record) { 
       return <div> 
          <Record key={record.id} data={record} /> 
         </div>; 
      }); 
     return (
      <div> 
       {records} 
      </div> 
     ); 
    } 
} 

class Record extends React.Component { 
    render() { 
     return (
      <div> 
       <h1>Title: {this.props.data.title}</h1> 
      </div> 
     ); 
    } 
} 

Der Code korrekt ausgeführt wird, außer für die Warnung unten, dass auf der Konsole angezeigt:

Warning: Each child in an array or iterator should have a unique "key" prop. 
Check the render method of `Records`. 

ich den Link gefolgt sind in der Warnung zum React Guide (http://facebook.github.io/react/docs/multiple-components.html#dynamic-children) enthalten.

Obwohl ich denke, dass ich ihre Empfehlung implementiert habe, dass der Schlüssel immer direkt an die Komponenten im Array geliefert werden soll, nicht an den Container-HTML-Child jeder Komponente im Array, bekomme ich diese Warnung immer noch in der Konsole.

Hat jemand irgendwelche Ideen warum? Ich schätze jede Hilfe, die Sie mir bieten können!

Answer 1

Das Problem ist, dass Sie die Schlüsselrequisiten dem äußeren div, nicht zu Ihrer Record-Instanz hinzufügen sollten.

var records = 
      this.props.data.map(function(record) { 
       return <div key={record.id}> 
          <Record data={record} /> 
         </div>; 
      }); 

In der Tat, Sie brauchen nicht die Verpackung div überhaupt.

Die Warnung ist da, weil Sie die Schlüsselstütze zum wiederholten Element hinzufügen müssen, und in Ihrem Code haben Sie eine Liste von divs, die jeweils einen Datensatz (keine Liste von Datensätzen) enthalten. Reagieren fordert Sie auf, dies zu tun, um diese divs, die genau gleich wären, "verfolgen" (identifizieren) zu können, ohne sie identifizieren zu können. Reagieren muss diese IDs zu DOM-Mutationen wirksam verfolgen (zB Nachbestellung sie, Entfernen von ihnen, etc)

Dann, wenn Sie ES6 verwenden (transpiled mit Babel oder ähnliches) zusammen mit JSX Sie können nur dazu:

var records = this.props.data.map(record => <Record data={record} key={record.id} />) 

Answer 2

In Ihrem Codebeispiel ist das untergeordnete Element das umgebende Element <div>, nicht das Element Record, das über die Eigenschaft key verfügt.

Ihre resultierende HTML-Struktur wie diese So

<div> 
    <div><h1 key="1">...</h1></div> 
    <div><h1 key="2">...</h1></div> 
    <div><h1 key="3">...</h1></div> 
</div> 

sieht in der Tat reagieren korrekt ist, wird die Sammlung nicht einen eindeutigen Schlüssel für das Element der obersten Ebene haben.

Ihre beiden Optionen sind:

(A) Fügen Sie die key Eigenschaft an die umgebende <div>, so dass es so

<div> 
    <div key="1"><h1>...</h1></div> 
    <div key="2"><h1>...</h1></div> 
    <div key="3"><h1>...</h1></div> 
</div> 

var records = 
    this.props.data.map(function(record) { 
     return <div key={record.id}> 
       <Record data={record} /> 
      </div>; 

Oder

sieht

(B) Lassen Sie sich von der Umgebung los <div> insgesamt, da es nicht benötigt wird.

var records = 
    this.props.data.map(function(record) { 
     return <Record key={record.id} data={record} />; 

Side-note: Reagieren erwartet Ihre render Aufruf nur ein einziges Element der obersten Ebene zurückzukehren, so brauchen Sie nur ein Containerelement, wenn Sie mehrere Geschwisterelemente in einem Render Aufruf haben wollen.