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

由于孩子们现在是动态的，我需要向他们添加key，但如果我尝试这样的话：

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

它没有说key是只读的。从this question起，似乎cloneElement也是不行的。那么有没有办法动态设置key？

Answer 1

在cloneElement内使用map：

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

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

Answer 2

我遇到了同样的问题，所以在你的功能中，只需这样做：

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

      return (<componentA key={function_generating_random_strings()}>
        {filteredChildren}
      </componentA>)
    }
  }
}

React：动态设置元素键

2 个答案: