javascript - 将 key 分配给克隆的ReactJS元素

我正在尝试使用React.cloneElement()向孩子添加道具。但是由于React抱怨渲染的孩子没有钥匙，所以我必须给他们分配钥匙：

  const extendedChildren = children.map((child, index) => {
    const unkeyedElement = React.cloneElement(child, someProps);
    unkeyedElement.key = index;
    return tmpElement;
  });

它们的渲染方式如下：

return (
  <div>{extendedChildren}</div>
);

但是后来我得到了这个错误：


  未被捕获的TypeError：无法分配为只读属性'key'
  对象“＃”


有没有更好的方式为孩子们分配钥匙？

编辑：

Object.assign({}, unkeyedElement, { key: index })可以解决问题，但是我觉得这是一种反模式，因为我为不需要的键付出了很多努力。任何建议都欢迎。

最佳答案

如果您有Object spread的预设，

const extendedChildren = children.map((child, index) => {
    return React.cloneElement(child, { ...someProps, key: index });
});

除此以外，

const extendedChildren = children.map((child, index) => {
    return React.cloneElement(child, Object.assign({}, someProps, { key: index }));
});

  我为不需要的钥匙付出了很多努力


key对React真的很重要。实际上，它不是作为prop传递给组件的，而是由React自身用于协助集合的协调。这样，React可以处理最小的DOM更改。

关于javascript - 将 key 分配给克隆的ReactJS元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40776125/