实例化后可以添加 React Keys 吗？

Question

我正在制作 React Elements 的集合并展示它们；下面是一个简单的例子，用来描述一个如何修改一个预先存在的实例化元素的问题。

var c = [
  <div>A</div>,
  <div>B</div>,
  // ...
  <div>Z</div>
];

var ListComponents = React.createClass({
    render: function() {
        return <div>{c}</div>;
    }
});

ReactDOM.render(<ListComponents/>, document.getElementById('root'));

虽然上面的代码“有效”，但它会呈现一条我不想忽略的控制台消息：

警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。 检查 `ListComponents` 的渲染方法。 有关详细信息，请参阅 https://fb.me/react-warning-keys。

从表面上看，我可以为c 中的每个元素添加一个唯一的key="…" 字符串并完成它。

但是，这似乎很冗长，特别是因为我有一个索引数组中的数据和一种函数式语言，理论上可以为每个键分配其匹配的索引值，而无需手动输入它作为源文字。

我很想能够做到这一点......

c.forEach( (e,i) => e.key = i );        // ...or call some setter

什么是*正确的* React 方法来做到这一点 - 并且 - 保持代码干净？

---

附录： ...对于好奇或只想说添加关键字段的人...

我使用的集合实际上是一个元组数组，包含元数据和相应的 React 元素、自定义组件或一些巨大的 JSX 块。上面的示例过于简单化了实际数据的外观及其不规则性。

由于源数据本身很长，经常更新，并且不是由开发人员维护的；它很容易出现遗漏关键字段或重复手动输入的值。因此，希望完全以编程方式完成。我不能指望数据所有者正确地做到这一点。他们无法阅读代码，所以理想情况下，我宁愿不要用大量“编程垃圾”来搞乱数据结构。

对集合进行了几次操作，将某些元素的各种运行放入其他动态创建的包装器中，以便最终的集合在最终显示之前实际上是由一些转换、过滤器和映射生成的。

Answer 1

向Wes Bos 致敬，他想出了一个可行的聪明解决方案！

代码是一个简单的单行代码，完全符合我的要求：

c = c.map( (el,key) => React.cloneElement(el, {key} ));

我们正在使用 .cloneElement() 方法构建一个新集合，但我并不知道。事实证明，这正是我所需要的。

在 .map() 操作中，lambda 函数同时传递了元素和 index。它的返回值是一个克隆的元素，但是设置了 key 属性。

通过巧妙地命名索引元素key，它允许表达式{ "key" : key } 的短符号。该对象增强了克隆对象。

最后，我得到了一个新的相同对象集合，每个对象都有一个键属性设置为索引。