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}非常有用。

Answer 2

由于react将key视为特殊属性（http://facebook.github.io/react/docs/special-non-dom-attributes.html），因此无法通过props访问它。 react文档还警告不要在普通的html标签（http://facebook.github.io/react/docs/multiple-components.html#dynamic-children）中设置密钥，并建议在反应组件中包装多个组件。

如果您将key重命名为非保留的内容，则应该有效：

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 }
]

然后您可以通过子组件（FeedList）中的@props.itemId访问itemId。

FeedList：

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

请注意，每个组件的密钥对于DOM中的每个组件或节点都必须是唯一的，这就是为什么无法继承密钥的原因，因为将父和子设置为同一个密钥都不允许反应在呈现DOM时将它们标识为单独的实体。

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

2 个答案: