如何给不变的唯一键列表项目反应？

Question

我试图使一个输入组件，突出了新改变的字符。为了实现这一点，我让输入元素透明，并在它下面创建了一个具有相同字体大小的div绝对位置。在这个div里面，我用输入字符串的每个字符渲染了一个span的列表。为了跨度，我应用了一个3s动画来将它的颜色从红色（高亮显示）更改为黑色（正常）。
现在要使列表正确运行，我需要通过每个列表项的键，用于唯一标识每个列表项，以便仅突出显示最近输入的字符，其余字符保持不变。

我所尝试的

>

使用索引作为键
只要我在最后插入文本，就可以正常工作，但当在两个元素之间插入任何文本时，所有以下元素的索引都会发生更改，因此它们都会更新并突出显示

使用字符作为键
由于我们只有26个字符，只要任何字符重复一次，a就会为两个不同的列表项使用相同的键，而且它的行为也很奇怪

使用字符和上下文作为键（即，charr[index 1]arr[index-1]等）
但在涉及类似模式时，如“aaaaa”等。。它的行为出乎意料。

使用随机数/id生成器（uuid等）/新日期（）。getTime（）
但只要元素更新，就会调用渲染函数，并且所有列表项都会收到全新的键，所以它们都会更新

在父组件中使用计数器来计算输入字段中的更改总数，并将该数字指定为新添加的字符组件的键。
我不知道如何实现，因为为此我需要检查一些东西，比如元素没有键，分配新的数字，否则保留旧的数字。

有没有办法给每个列表项的新键（唯一的）基于它是什么时候创建的，这样我就可以只突出显示更改的元素？

class Input extends Component {
  render() {
    let elems = null;
    let str = Array.from(this.props.value);
    elems = str.map((ch, i, arr) => (
      <span key={ch + arr[i - 1]} className="ch"> // .ch has animation to change color from red to black
        {ch}
      </span>
    ));
    return (
      <div className="fancyText">
        <input
          type={this.props.type}
          value={this.props.value}
          placeholder={this.props.placeholder}
          onChange={this.props.onChange} 
        /> // this one is transparent
        <div className="highlighted"> // this is visible
            {elems}
        </div>
      </div>
    );
  }
}

这里是沙盒链接*




Answer 1

为了完成您所需要的，您可以使用一个名为uuid的简单npm包。在类组件中，首先导入它。

import { v4 as uuidv4 } from 'uuid';

然后，您必须为要重用的组件的第一个父标记分配唯一id。

<span key={uuidv4()} className="ch">
    {ch}
  </span>

如果你有一个自定义密钥，那么你可以像这样用uuid，

 <span key={uuidv4(YOUR_CUSTOM_KEY)} className="ch">
    {ch}
  </span>

希望这对你有帮助。