javascript - 为克隆的 ReactJS 元素分配键

Question

我正在尝试使用 React.cloneElement() 向子项添加 Prop 。但由于 React 提示渲染的子级没有键，所以我必须为它们分配一个键:

  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 '#'

是否有更好的方法为 child 分配 key ？

编辑:

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

Answer 1

如果您有 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 }));
});

<小时/>

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

key 对于 React 来说非常重要。实际上它并没有作为 prop 传递给组件，而是被 React 本身用来帮助集合的协调。这样 React 就可以处理最小的 DOM 变化。