2016-11-03 55 views
2

我不能確定如何通過一鍵無國籍反應成分無狀態作出反應如何通過關鍵

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


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

這樣做會導致關鍵的警告。

所以,我想通過一個道具

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


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

在關鍵傳球但我得到的錯誤 https://facebook.github.io/react/warnings/special-props.html

我怎麼打算通過/使用我的無狀態組件的關鍵?

+2

刪除'key = {this.props.key}',它將在沒有它的情況下工作。 – Solo

+0

但是,我不應該設置內部反應正確工作的關鍵嗎? – dboyd68

+4

據我所知,在''上設置它足以幫助React。 – Solo

回答

1

由於錯誤說,特殊道具(ref and key)這是通過使用做出反應,並因此不轉發到組件,這樣你就可以不上名字key通過道具和肯定,以消除警告您需要定義鍵,所以只需在將其發送到MyComponent時重命名該道具。另外我相信你必須在你的無狀態組件中使用prop,比如props.index而不是this.props.index

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


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

您只需要定義該跨度的關鍵點,使用它作爲key={props.index}。它應該消除警告。

+0

我的回答有助於解決您的問題 –

0

根據React文檔,應該爲列表組件項提供一個鍵。

您只需要通過key來響應組件,您不需要在組件中使用它,就像使用props.key訪問密鑰一樣。

結帳Basic List Component