Question

鉴于以下内容：

function generateWrapper(...elements) {
    return (
        <div>
            {...elements}
        </div>
    );
}

ReactDOM.render(
    generateWrapper(
        <MyElement name="first" />,
        <MyElement name="second" />,
    ),
    document.getElementById("app"),
);

React会理所当然地抱怨我没有为包装div的每个子项添加一个关键属性。我怎样才能做到这一点？或者这违背了反应发展的精神？谢谢你提前给出任何答案！

PS：是的，我看到了一个类似的问题，但似乎是针对不使用JSX的用户

PPS：我确实知道我只能为first和second MyElement添加密钥，但这是我试图避免的

编辑：更改代码以更好地适应我的情况

Answer 1

看看React.cloneElement。您可以使用它在generateWrapper方法中创建和附加密钥属性。

function generateWrapper(...elements) {
  return (
    <div>
      {
        elements.map(element =>
          React.cloneElement(element, { key: 'your-unique-key-here' })
      }
    </div>
  );
}

可以在React JSX Element实例化后添加密钥吗？

1 个答案: