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

Question

工具：Reactjs 0.14.0 Vanilla Flux

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

假设我有一个消息列表，如下所示：

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

现在我使用 Array.prototype.map() 在所有者组件 MessageSection

中创建 "ownee" 组件 (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 用作道具是有原因的。

问题：

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

Answer 1

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

Answer 2

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

function getMessageListItem(message) {

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

Answer 3

正如我们已经在其他答案中确定的那样，您不能使用 key 因为它不是作为 prop 传递的，而是在 React 内部使用的。这是我的 2 美分替代方案：
由于您在创建 <MessageListItem> 组件时将整个消息数组作为 prop 传递，因此您不一定需要使用 id 传递另一个 prop。您可以在需要使用 id 时简单地使用 {this.props.message.id}。

Answer 4

如您所见，key 属性由 React 本身消耗，而不是传递给 child 组件。这就是 React 用来跟踪数组中的条目以避免不必要地 re-rendering 它们的方法（无论是调用它们的 render 还是与 DOM 协调）。

不幸的是，这意味着如果您还想在 child 中使用它，则必须传递两次。在您的代码中，您已经传递了两次（一次作为 key，一次作为 message 的一部分）。因此，您可以保留当前的 JSX，只需在 child:

中使用 message 中的 id

var MessageListItem = React.createClass({
    render: function() {
        console.log(this.props.message.id);
//                             ^^^^^^^^^^^−−−−− Has the value
    }
});

更多：

Lists and Keys
Why keys are necessary（从上面链接）
Special props warning - 这告诉我们 key 和 ref 是没有传递给 child 组件

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

Reactjs: Key undefined when accessed as a prop

javascript

flux

reactjs

reactjs-flux