Question

这个例子是设计的，但它可以达到我需要做的。

假设我有一个像这样的现有组件：

var c1 = React.DOM.p( {} );

后来我需要在数组的上下文中使用这个组件，如下所示：

var container = React.DOM.div( {}, [ c1, c2 ] );

这将创建一个包含c1和c2子组件的div，但是React抱怨传递给div函数的数组中项目缺少关键属性。

是否可以先将密钥添加到已存在的c1组件中，然后再将其传递给容器？我确实可以在首次创建c1时设置它，但之后我需要这样做。

我正在查看React方法和插件，而没有看到解决此案例的任何内容。

Answer 1

啊哈，在重新阅读documentation here之后，我注意到了这一行：

您还可以通过传递对象来键入子项。对象键将用作每个值的键。

所以，不是传递上面的数组，而是我可以做这样的事情：

var p = React.DOM.p( {} ),
    contentObject = {
        component1: p,
        component2: somethingElse
    },
    container = React.DOM.div( {}, contentObject );

并且react会将对象参数解释为这些组件的键。

Answer 2

如果您只想禁止警告/使其明确，您可以使用效用函数：

function keyByIndex(xs){
  var obj = {};
  for (var i=0; i<xs.length; i++) obj["k"+i] = xs[i];
  return obj;
}

render: function(){
  var array = [div(null, "hello"), div(null, "world")];
  return div(null, keyByIndex(array));
}

demo

另请注意，这些是等效的：

React.DOM.div({}, c1, c2)
React.DOM.div({}, {a: c1, b: c2})
React.DOM.div({}, keyByIndex([c1, c2]))

在实例化React组件后是否可以添加键属性？

2 个答案: