您可以在实例化React JSX元素后向其添加密钥吗？

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方法中创建并附加key属性。

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