React.js：作为道具访问时键未定义

Question

工具：Reactjs 0.14.0 Vanilla Flux

我需要唯一标识符的原因有两个：

1. 儿童和解
2. 跟踪点击了哪个孩子

因此，假设我有一个看起来像这样的消息列表：

[
      {
        id: 1241241234,  <-----The unique id is kept here
        authorName:"Nick"
        text:"Hi!"
      },
      ...
]

现在，我使用“ Array.prototype.map（）” 在所有者组件内部创建“
ownee”
组件（MessageListItem）MessageSection

function getMessageListItem)(message) {

  return (
    <MessageListItem key={message.id} message={message}/>
  );
}

var MessageSection = React.createClass({
   render: function(){
       var messageListItems = this.state.messages.map(getMessageListItem);
       <div>
           {messageListItems }
       </div>
   }
});

但是this.props.key在MessageListItem中是未定义的，即使我知道在传递时已定义的事实也是如此。

var ConvoListItem = React.createClass({
  render: function() {
    console.log(this.props.key); //Undefined
  }
});

我猜有一个原因，React不让“键”用作道具。

题：

如果我不能使用key作为道具-那么处理在包含状态的子元素的动态列表上键入和设置唯一标识符的双重性需求的正确方法是什么？

Answer 1

最好使用id。然后在eventHandler中可以拥有event.target.id。

function getMessageListItem)(message) {



  return (

    <MessageListItem key={message.id} id={message.id} message={message}/>

  );

}