reactjs - 在 React 中如何将 key prop 添加到作为对象传递的元素

Question

代码大约如下所示(CoffeeScript)

//In Parent component

render: () ->

  mycomp = <SomeComponent some_prop="something" />

  <ChildComponent passedComp = mycomp />


//In Child component

render: () ->

 someContent = [passedComp, <AnotherComp key={2} />]


 <div>
   {someContent}
 </div>

这会生成一个关于子组件中数组中缺少键的警告。

问题是如何将key={1}添加到Child组件中的passedComp中。我无法在 Parent 的 render 方法中执行此操作(与 some_prop 一起)，因为我现在不知道应该是什么键。我需要在 Child 组件中添加 key 属性 - 但这里 PassedComp 已经是一个对象。

我如何修改passedComp以获得 key ？

• 更新:

我有

someContent = [<span key={1}>{passedComp}</span>, <AnotherComp key={2} />]

它消除了 React 警告，但额外的跨度破坏了我的(以及 react 引导的)CSS。有更好的解决办法吗？

Answer 1

您可以使用 React.Fragment 添加键，而不会破坏 CSS，也无需克隆:

someContent = [<React.Fragment key={1}>{passedComp}</React.Fragment>, <AnotherComp key={2} />]