你可以在实例化后向 React JSX 元素添加一个键吗？

Question

鉴于以下情况：

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

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

React 会理所当然地抱怨我没有为包装器 div 的每个子级添加一个关键属性。我怎样才能做到这一点？还是这违背了 React 开发的精神？感谢您提前提供任何答案！

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

PPS：我确实意识到我只能向firstand 中添加一个键，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>
  );
}