Question

自最新版本的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 会抛出警告。这种行为是否正常？我们做错了吗？我的意思是我们需要为500多个组件/子项添加密钥，这是一项艰苦而乏味的工作...

此外，警告说“undefined”功能正在抛出它。所以每次我需要挖掘大约10分钟到1小时来检查纠正的地方... :(

祝你好运， Kursion

Answer 1

这里有两件事情，所以让我们分开......

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

正如@FakeRainBrigand所提到的，这个示例代码不应该是关于密钥的警告。事实上它并没有 - http://jsfiddle.net/zpao/5KSah/。我们进行此警告工作的方式是检测数组是否作为参数传递。
如果你有500个孩子，那么我很难相信你没有阵列。

此外，警告说该功能＆＃34; undefined＆＃34;扔掉它

这是因为React使用名为displayName的属性（在传递给createClass的对象上指定）来构建该警告。使用JSX时，我们可以根据赋值为您自动生成该属性。它并不总是完美的，但它通常运作良好。使用CoffeeScript时，您可能希望自己指定此属性。

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

带键的ReactJS动态子

1 个答案: