React:动态设置元素键

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

由于孩子现在是动态的,我需要添加keys给他们,但如果我尝试类似的东西:

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

它失败说key是只读.从这个问题来看,似乎cloneElement也是一个禁忌.那么有没有办法动态设置key？

Answer 1

cloneElement在里面使用map:

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

已知2ⁿᵈ参数React.cloneElement是克隆元素的新道具.其中一个道具就是key这个例子.