javascript - react : Dynamically setting element keys

Question

tl;dr -- 如何动态地将 key 添加到 React 元素？

---

我有一个 React 组件，当它单独存在时，它有一个静态子列表:

<componentA>
  <child ... />
  <child ... />
  <child ... />
</componentA>

由于列表是静态的，因此不需要任何子项上的键。

现在我有另一个组件包装这个组件并使它的子组件动态:

function componentB(componentA) {
  return class extends React.Component {
    render() {
      const filteredChildren = // ... filter this.props.children

      return (<componentA>
        {filteredChildren}
      </componentA>)
    }
  }
}

由于 children 现在是动态的，我需要向他们添加 key，但是如果我尝试这样的事情:

React.Children.map((child, i) => {
  child.key = i;
  return child
});

它没有说 key 是只读的。来自 this question似乎 cloneElement 也是不行的。那么有没有办法动态设置一个key呢？

Answer 1

在 map 中使用 cloneElement :

React.Children.map(this.props.children, (child,  i) =>
      React.cloneElement(child, { key:  i })
 );

已知 React.cloneElement 的 2ⁿᵈ 参数是克隆元素的新属性。在这个例子中，其中一个 Prop 是 key。