React不会将特定的值传递给“ props”

Question

I'm having a strange issue that I can't pin down with React (I'm using CoffeeScript as well, but I highly doubt this is a factor). Basically, I'm following along with a tutorial in which a message feed is built using a Feed component (the parent), FeedList component (child), and a FeedItem (grandchild)...sorry if my terminology is incorrect. The relevant code is:

Feed.cjsx

getInitialState: ->
  FEED_ITEMS = [
    { key: 1, title: 'Realtime data!', description: 'Firebase is cool', voteCount: 49 }
    { key: 2, title: 'JavaScript is fun', description: 'Lexical scoping FTW', voteCount: 34 }
    { key: 3, title: 'Coffee makes you awake', description: 'Drink responsibly', voteCount: 15 }
  ]
  {
    items: FEED_ITEMS
    formDisplayed: false
  }
  ...

render: ->
  ...
  <FeedList items={@state.items} onVote={@onVote} />

FeedList.cjsx

render: ->

  feedItems = @props.items.map ((item) -> 
    <FeedItem key={item.key} ... />
  ).bind(@)

  <ul className='list-group container'>
    {feedItems}
  </ul>

FeedItem.cjsx

render: ->
  <li key={@props.key} className='list-group-item'>
    ...
  </li>

If I console.log "@props.key" in the render method for FeedItem, I get undefined. But if I log "item.key" from inside the map function of FeedList's render method, I get 1, 2, 3, as I should. So it seems to me that, for whatever reason, React doesn't want to pass the "key" prop to the FeedItem. Any thoughts?

Answer 1

For anyone else stumbling across this, react only has a few reserved props but they are worth noting. key, ref, __self and __source.

var RESERVED_PROPS = { key: true, ref: true, __self: true, __source: true };

^^ Taken from the react source.

Also worth noting __self={this} is really useful if you're receiving invariant violation errors and would like to be able to debug them down to a component level.

Answer 2

Since react treats key as a special attribute ( http://facebook.github.io/react/docs/special-non-dom-attributes.html ), it cannot be accessed via the props. The react documentation also warns against setting keys within plain html tags ( http://facebook.github.io/react/docs/multiple-components.html#dynamic-children ), and suggests wrapping multiple components in a react component.

If you rename key to something non-reserved, it should work:

Feed.cjsx:

FEED_ITEMS = [
    { itemId: 1, title: 'Realtime data!', description: 'Firebase is cool', voteCount: 49 }
    { itemId: 2, title: 'JavaScript is fun', description: 'Lexical scoping FTW', voteCount: 34 }
    { itemId: 3, title: 'Coffee makes you awake', description: 'Drink responsibly', voteCount: 15 }
]

then you can access the itemId via @props.itemId in the child component (FeedList).

FeedList:

feedItems = @props.items.map ((item) -> 
    <FeedItem key={item.itemId} ... />
).bind(@)

Note that the keys for each component need to be unique for each component, or node in the DOM, which is why it makes sense that keys cannot be inherited, as setting both parent and child to the same key would not allow react to identify them as separate entities when rendering the DOM.