reactjs – React中重复元素的密钥管理

<FillScreen items={[
    { id: 'one',content: 'foo' },{ id: 'two',content: 'bar' }
]} />

在内部,此组件将获得屏幕大小,并最终将使用这些项目填充屏幕.生成的DOM将如下所示：

<div class="fill-screen">
   <div>foo</div>
   <div>bar</div>
   <div>foo</div>
   <div>bar</div>
   <div>foo</div>
   <div>bar</div>
   <div>foo</div>
</div>

我遇到的问题是,当这个元素计算出它需要渲染7个元素时,我不能直接使用items [i] .id作为每个元素的键,因为会有重复的键.

我不确定这个问题的最佳模式是什么,我认为有两种可能的解决方案我并不完全喜欢：

解决方案A.

在每个键上附加一个循环索引,因此render中的数组包含以下JSX：

<div key='one-0'>foo</div>
   <div key='two-0'>bar</div>
   <div key='one-1'>foo</div>
   <div key='two-1'>bar</div>
   <div key='one-2'>foo</div>
   <div key='two-2'>bar</div>
   <div key='one-3'>foo</div>

编辑 – 请注意,这些元素正在生成一个数组,这就是我们需要指定一个键的原因

我看到这种方法存在两个问题：

>在这一点上,我可能只是摆脱原始密钥,只使用一个索引,这是绝对不鼓励的.
>我的真实组件,你给这个组件的项目的方式是通过孩子(我在这里过分简化以获得重点),所以我必须克隆每个元素只是为了更改密钥.

解决方案B.

使用片段分隔循环

<Fragment key={0}>
     <div key='one'>foo</div>
     <div key='two'>bar</div>
   </Fragment>
   <Fragment key={1}>
     <div key='one'>foo</div>
     <div key='two'>bar</div>
   </Fragment>
   <Fragment key={2}>
     <div key='one'>foo</div>
     <div key='two'>bar</div>
   </Fragment>
   <Fragment key={3}>
     <div key='one'>foo</div>
   </Fragment>

在这里感觉更干净,但与此同时,这不是碎片首先被添加的原因,所以也许是在滥用它们？

这个问题有更好的解决方案吗？什么是社区标准？