Reactjs: Key undefined when accessed as a prop

问题

Tools: Reactjs 0.14.0 Vanilla Flux

I need unique identifiers for 2 reasons:

Child Reconciliation
Keeping track of what child was clicked

So let's say I have a list of messages that looks like this:

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

And now I use a "Array.prototype.map()" to create "ownee" component(MessageListItem) inside of the owner component 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>
   }
});

But the this.props.key is undefined in the MessageListItem even though I know for a fact that is was defined when it was passed down.

var ConvoListItem = React.createClass({
  render: function() {
    console.log(this.props.key); //Undefined
  }
});

I'm guessing there is a reason that React is not letting "key" to be used as a prop.

Question:

If I can't use key as a prop - then what is the proper way to handle the duality need of keying and setting unique identifiers on a dynamic list of child elements that contain state?

回答1:

It is best to use id. Then in the eventHandler you can have event.target.id.

function getMessageListItem)(message) {

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

回答2:

key and ref aren't really 'props'. They're used internally by react and not passed to components as props. Consider passing it as a prop such as 'id'.

回答3:

As we already established in other answers that you can't use key since it isn't passed as a prop and instead used internally by react. Here is my 2 cents as an alternative:
Since you're passing the entire array of messages as a prop while creating the <MessageListItem> component, you don't necessarily need to pass another prop with id. You can simply use {this.props.message.id} whenever you need to use id.

来源：https://stackoverflow.com/questions/33661511/reactjs-key-undefined-when-accessed-as-a-prop

标签

javascript

reactjs

flux

reactjs-flux