Question

工具：Reactjs 0.14.0 Vanilla Flux

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

Child Reconciliation
Keeping track of what child was clicked

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

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

现在我使用“Array.prototype.map（）”在所有者组件MessageListItem内创建"ownee"组件（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没有让“钥匙”用作道具。

问题：

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

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

Answer 3

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

Answer 4

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

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

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 是没有传递给子组件的特殊道具

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

4 个答案: