带键的 ReactJS 动态子项

Posted 2023-02-21

【中文标题】带键的 ReactJS 动态子项

【英文标题】：ReactJS dynamic child with keys

【发布时间】：2014-04-20 18:46:26

【问题描述】：

从最新版本的 ReactJS 开始，我们有一个警告，要求为动态子级添加键。 我很难找到哪个组件正在生成这个警告......我首先假设只有在“for循环”中动态生成的子进程才会抛出这个警告（因为它是“动态生成的”）。最后，我发现我们应用程序的每个组件都会抛出这个错误，因为我们到处都有孩子（即使我们没有“for循环”）:(

我们正在使用 CoffeeScript，我问自己是否以正确的方式使用 ReactJS：

DOM = React.DOM
myComponent = React.createClass
  render: ->
    DOM.div className: "app", ref: "app",
      DOM.div className: "child1", "This is a test" # throw warning
      DOM.div className: "child2", key: "child2", "Hello" # don't throw warning

这里 child1 会抛出警告，除非我们添加 key 属性。这种行为正常吗？我们做错了什么吗？我的意思是，我们需要为 500 多个组件/子项添加密钥，这是一项艰巨而无聊的工作......

此外，警告说函数“未定义”正在抛出它。所以我每次都需要挖掘大约 10 分钟到 1 小时来检查在哪里纠正问题...... :(

最好的问候， 库尔西翁

【问题讨论】：

你要添加 500 个没有循环的孩子？！

不应该对此发出警告。 key 用于数组中的元素；您在此代码中没有任何数组。问题可能出在其他地方。

【参考方案1】：

这里发生了两件事，所以让我们将它们分开......

除非我们添加关键属性，否则 child1 会抛出警告。这种行为正常吗？我们做错了什么吗？我的意思是，我们需要为 500 多个组件/子项添加密钥，这是一项艰巨而无聊的工作......

正如@FakeRainBrigand 所提到的，此示例代码不应警告有关键的信息。事实上它没有 - http://jsfiddle.net/zpao/5KSah/。我们让这个警告起作用的方法是检测一个数组是否作为参数传递。 如果您有 500 个孩子，那么我很难相信您没有数组。

此外，警告说函数“未定义”正在抛出它

这是因为 React 使用一个名为 displayName 的属性（在传递给 createClass 的对象上指定）来构建该警告。使用 JSX 时，我们可以根据分配为您自动生成该属性。它并不总是完美的，但通常效果很好。使用 CoffeeScript 时，您可能需要自己指定此属性。

/** @jsx React.DOM */
var MyComponent = React.createClass( ... );
// becomes
var MyComponent = React.createClass(displayName: 'MyComponent', ... );

【讨论】：

像往常一样，谢谢 Paul：我爱你 :) 我打算明天在办公室再试一次，看看我的团队是否理解了一些遗漏。

哈哈，希望对你有帮助:)

是的，实际上我们是显式地推送数组。顺便说一句，我尝试使用 displayName 属性，但它似乎不起作用。