javascript - React won't pass a particular value to "props" - Stack Overflow

admin管理员组

文章数量:1288019

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 ponent (the parent), FeedList ponent (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?

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 ponent (the parent), FeedList ponent (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?

• javascript
• reactjs

Share Improve this question Follow edited Jan 15, 2015 at 13:27 Luboš Turek 6,61599 gold badges4242 silver badges5050 bronze badges asked Dec 24, 2014 at 7:03 sunny-mittalsunny-mittal 50977 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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 ponent level.

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-ponents.html#dynamic-children), and suggests wrapping multiple ponents in a react ponent.

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 ponent (FeedList).

FeedList:

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

Note that the keys for each ponent need to be unique for each ponent, 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.

本文标签： javascriptReact won39t pass a particular value to quotpropsquotStack Overflow