指定要克隆的ReactJS元素的密钥

Question

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

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

而且他们呈现：

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

但我一这个错误：

Uncaught TypeError: Cannot assign to read only property 'key' of object '#'

有没有一种更好的方式为孩子分配键？

编辑：

Object.assign({}, unkeyedElement, { key: index })可以解决这个问题，但我感觉这是一个反模式，因为我把很多精力只是，我并不需要一个密钥。欢迎任何建议。

如果您有预设为 Object spread

Answer 1

，

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

---

I put much effort just for a key that I don't need

的key是反应非常重要。实际上它不是作为道具传递给组件的，而是由React自己用来协助馆藏的调和。这样React可以处理最小的DOM更改。