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

Is it possible to add a key attribute after a React component is instantiated?

本文关键字：一个 属性 添加 React 组件 实例化 是否      更新时间：2023-09-26

这个例子是人为设计的，但它达到了我需要做的

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

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

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

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

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

在将密钥传递到容器之前，是否可以先向现有的c1组件添加密钥？我确实意识到它可以在第一次创建c1时进行设置，但我需要在之后进行设置。

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

Aha，在重读这里的文档后，我注意到了这一行：

您也可以通过传递对象来为子对象设置关键帧。对象键将用作每个值的键。

所以，与其在上面传递数组，我可以做这样的事情：

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

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

如果你只想抑制警告/使其明确，你可以使用一个实用函数：

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));
}

演示

还要记住，这些是等效的：

React.DOM.div({}, c1, c2)
React.DOM.div({}, {a: c1, b: c2})
React.DOM.div({}, keyByIndex([c1, c2]))
相关文章：