Reactjs:作为道具访问时未定义的键

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>
   }
});

但是在MessageListItem中未定义this.props.key,即使我知道在传递它时定义的事实.

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

我猜有一个原因是React没有让"关键"用作道具.

题:

如果我不能使用密钥作为支柱 - 那么在动态包含状态的子元素列表上处理密钥和设置唯一标识符的二元性需求的正确方法是什么？

Answer 1

key和ref不是真正的"道具".它们通过反应在内部使用,而不是作为道具传递给组件.考虑将其作为诸如"id"的道具传递.

Answer 2

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

function getMessageListItem)(message) {

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