您可以在实例化之后向React JSX元素添加键吗？

考虑以下几点：您可以在实例化之后向React JSX元素添加键吗？

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

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

阵营将理所当然地抱怨说，我还没有添加一个关键属性，每个包装div的儿童。我怎样才能做到这一点？或者这是否违反反应发展的精神？提前感谢任何答案！

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

PPS用户：我知道我可以只添加一键first和secondMyElement的，但是这是正是我试图避免

编辑：更改代码，以更好地满足我的情况

来源

2017-07-17 Right2Drive

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

我完全理解为什么需要一个关键字，以及在实例化过程中如何去做。我只是问在实例化后是否可以这样做，所以它可以在generateWrapper中完成一次，而不是每个单独的组件 – Right2Drive

我通常使用'[] .map（（e，i）=>

{e}

）''。 – T4rk1n

看看React.cloneElement。您可以使用它在您的generateWrapper方法内创建并附加关键属性。

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

来源

2017-07-17 23:55:22

这看起来正是我在寻找的东西对于。只是想知道，这种方法是否会继续得到反应团队的全力支持？你知道性能影响吗？ – Right2Drive

不能专门代表React团队发言，但扩展JSX元素的道具是一种常见模式，可能不会很快消失。 –

非常感谢您的帮助！ – Right2Drive

您可以在实例化之后向React JSX元素添加键吗？

回答

相关问题