带键的ReactJS动态子

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多个组件/子项添加密钥,这是一项艰苦而乏味的工作......

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

此外,警告说"undefined"函数正在抛出它

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

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