Question

我有一个perkProgress道具，它总是一个0-3的整数。我正在使用Ramda的库来实现他们的repeat功能，以便将元素的创建重复三次＆＃39; {R.repeat(<CheckCircle key={uid()} />, this.props.perkProgress)}

我的问题是我不确定如何创建一个独特的ID＆＃39;对于key道具。我去UUID Package寻求帮助，但我仍然得到同样的警告。就像uid()首先渲染静态文本一样，然后.repeat()将-exact值重复三次。我试过Math.random()来测试这个理论，同样的事情发生了。

您应该如何为创建重复组件的内容分配唯一ID？

CodeSandbox - 我无法让uid在这里工作，但为了表明我使用的Math.random()你会期望得到不同的结果，但它是每次都是一样的。

Answer 1

将Math.random设置为React元素键并不是一个好主意，因为在每次渲染时都会生成一个新的密钥，用于影响反应性能。您可以改为使用R.range(0, 3)并映射它，将值设置为关键字，如

const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    {R.range(0, 3).map(key => <li key={key}>Hi</li>)}
    <h2>Start editing to see some magic happen {"\u2728"}</h2>
  </div>
);

<强> CodeSandbox

P.S。 repeat会记住该值，因此您会看到生成的每个项目都使用相同的密钥。

为重复的组件反应不同的键

1 个答案: