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

Posted 2023-03-21

【中文标题】你可以在实例化后向 React JSX 元素添加一个键吗？

【英文标题】：Can you add a key to a React JSX Element after it's instantiated?

【发布时间】：2017-12-22 15:18:53

【问题描述】：

鉴于以下情况：

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


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

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

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

PPS：我确实意识到我只能为 first 和 second MyElement 添加一个密钥，但这是我试图避免的

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

【问题讨论】：

如果你渲染一个列表，每个组件都需要一个键。

我完全理解为什么需要一个密钥，以及在实例化过程中如何去做。我只是问是否可以在实例化后执行它，以便可以在 generateWrapper 中完成一次，而不是针对每个组件

我一般用[].map((e, i) => <div key=i>e</div>)。

我也被推荐在其他地方为MyElement 创建一个包装组件，为MyElement 添加一个密钥，只是为了为那些寻找答案的人提供我收到的所有替代方案跨度>

【参考方案1】：

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

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

【讨论】：

这似乎正是我想要的。只是想知道，这种方法是否会继续得到 React 团队的全力支持？您知道性能影响吗？

不能特别代表 React 团队发言，但扩展 JSX 元素的 props 是一种常见的模式，可能不会很快消失。