React不会将特定值传递给"props"

Question

我有一个奇怪的问题,我无法用React确定(我也使用CoffeeScript,但我非常怀疑这是一个因素).基本上,我正在跟随一个教程,其中使用Feed组件(父组件),FeedList组件(子组件)和FeedItem(孙组件)构建消息提要...对不起,如果我的术语不正确.相关代码是:

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>

如果我在FeedItem的render方法中使用console.log"@ props.key",我将得到未定义.但是如果我从FeedList的render方法的map函数中记录"item.key",我会得到1,2,3,就像我应该的那样.所以在我看来,无论出于何种原因,React都不想将"关键"道具传递给FeedItem.有什么想法吗？

Answer 1

对于任何绊倒这个的人来说,反应只有一些预留的道具,但值得注意.key,ref,__ self和__source.

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

^^取自反应源.

__self={this}如果您收到不变的违规错误并希望能够将它们调试到组件级别,那么另外值得注意的是非常有用.