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
呢?
最佳答案
在 map
中使用 cloneElement
:
React.Children.map(this.props.children, (child, i) =>
React.cloneElement(child, { key: i })
);
已知 React.cloneElement
的 2ⁿᵈ 参数是克隆元素的新属性。在这个例子中,其中一个 Prop 是 key
。
关于javascript - react : Dynamically setting element keys,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42122453/