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

Reactjs: Key undefined when accessed as a prop

本文关键字：未定义 访问 Reactjs      更新时间：2023-09-26

工具：Reactjs 0.14.0香草通量

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

  1. 儿童对账
  2. 跟踪孩子被点击的内容

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

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

现在我使用CCD_ 1来创建"；所有者；所有者组件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作为道具是有原因的。

问题：

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

key和ref并不是真正的"道具"。它们由react内部使用，而不是作为道具传递给组件。考虑将其作为诸如"id"之类的道具传递。

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

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

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

正如您所发现的，key属性由React本身消耗，而不是传递给子组件。React使用它来跟踪数组中的条目，以避免不必要地重新渲染它们（无论是在调用它们的render还是与DOM协调方面）。

不幸的是，这意味着如果你也想在孩子身上使用它，你必须通过两次。在您的代码中，已经将其传递两次（一次作为key，一次作为message的一部分）。因此，您可以保留当前的JSX，只需在子级中使用message中的id即可：

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

更多：

  • 列表和密钥
  • 为什么需要钥匙（从上面链接）
  • 特殊道具警告-它告诉我们key和ref是不传递给子组件的特殊道具
相关文章：