2016-11-03 46 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