Stateless Reagieren wie Schlüssel

Question

passiert Ich bin nicht sicher, wie ein Schlüssel zu einem staatenlos reagiert Komponente

MyComponent: (props) => { 
     return(<span>{props.somevalue}</span>); 
    } 


aCollection.map((value,index)=> <MyComponent somevalue={value}); 

dies passiert Doing im Schlüssel Warnung.

Also habe ich versucht, über eine Stütze in Schlüssel zu übergeben

aCollection.map((value,index)=> <MyComponent key={index} somevalue={value}); 


MyComponent: (props) => { 
      return(<span key={this.props.key} >{props.somevalue}</span>); 
    } 

Jedoch habe ich den Fehler https://facebook.github.io/react/warnings/special-props.html

Wie soll ich passieren soll erhalten/den Schlüssel in meiner staatenlos Komponente verwenden?

Answer 1

Als Fehler besagt, dass spezielle Requisiten (ref and key), die durch Reagieren verwendet werden, und auf das Bauteil somit nicht weitergeleitet werden, so dass Sie nicht die Stütze namentlich key und ja brauchen, um Sie zu beseitigen passieren können warnen die definieren Schlüssel, also benennen Sie einfach die Requisite um, während Sie sie an MyComponent senden. Auch ich glaube, dass Sie die Stütze in Ihrer statuslosen Komponente wie props.index und nicht this.props.index verwenden müssen.

aCollection.map((value,index)=> <MyComponent index={index} somevalue={value}); 


MyComponent: (props) => { 
      return(<span key={props.index} >{props.somevalue}</span>); 
    } 

Sie müssen nur Schlüssel für die Spanne definieren, so dass es als key={props.index} verwenden. Es sollte die Warnung beseitigen.

Answer 2

Gemäß den React-Dokumenten sollte ein Schlüssel für Listenkomponentenelemente bereitgestellt werden.

Sie müssen nur die key übergeben Komponente zu reagieren, müssen Sie nicht in der Komponente verwenden, wie Zugriff auf den Schlüssel mit props.key.

auschecken Basic List Component.