javascript - Reactjs:作为 Prop 访问时未定义的键

Question

工具:Reactjs 0.14.0 Vanilla Flux

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

1. Child Reconciliation
2. Keeping track of what child was clicked

假设我有一个如下所示的消息列表:

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

现在我使用 Array.prototype.map() 来创建 "ownee"所有者组件 MessageSection

内的组件 (MessageListItem)

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 用作 prop 是有原因的。

问题:

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

Answer 1

key 和 ref 并不是真正的“ Prop ”。它们由 react 在内部使用，而不是作为 props 传递给组件。考虑将其作为 Prop 传递，例如“id”。