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

React won't pass a particular value to "props"

本文关键字：props 值传 React      更新时间：2023-09-26

我遇到了一个奇怪的问题，我无法用 React 确定（我也在使用 CoffeeScript，但我非常怀疑这是一个因素）。基本上，我正在遵循一个教程，其中使用源组件（父组件）、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 的呈现方法中控制台.log"@props.key"，我会得到未定义。但是，如果我从 FeedList 渲染方法的映射函数中记录"item.key"，我会得到 1、2、3，这是我应该得到的。所以在我看来，无论出于何种原因，React 都不想将"密钥"道具传递给 FeedItem。有什么想法吗？

对于其他偶然发现这一点的人来说，react 只有一些保留的道具，但它们值得注意.key、ref、__self 和 __source。

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

^^ 取自反应源。

还值得注意的是__self={this}如果您收到固定冲突错误并希望能够将它们调试到组件级别，则非常有用。

由于 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） 中设置键，并建议将多个组件包装在一个 react 组件中。

如果将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。

饲料列表：

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

请注意，每个组件的键对于 DOM 中的每个组件或节点必须是唯一的，这就是为什么键不能继承的原因，因为将父级和子级设置为相同的键将不允许 react 在渲染 DOM 时将它们标识为单独的实体。

相关文章：