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

IT技术 javascript reactjs flux reactjs-flux
2021-03-25 19:39:00

工具：Reactjs 0.14.0 Vanilla Flux

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

  1. 儿童和解
  2. 跟踪点击了什么孩子

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

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

现在我使用 a在所有者组件内部Array.prototype.map()创建“拥有者”组件（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用作props是有原因的。

问题：

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

4个回答

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

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

function getMessageListItem(message) {

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

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

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

不幸的是，这意味着如果您还想在 child 中使用它，则必须传递两次。在您的代码中，您已经将它传递了两次（一次作为key，一次作为 的一部分message）。所以，你可以保持您当前的JSX，只需使用id来自message于孩子：

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

更多的：

其它你可能感兴趣的问题
上一篇TS2339：“家”类型上不存在属性“props” 下一篇在 React 中使用 Hooks 实现倒数计时器