Как дать неизменяющиеся уникальные ключи элементам списка в React?

Question

Я пытаюсь создать Компонент ввода, который выделяет новый символ. Чтобы это произошло, я сделал элемент ввода прозрачным и создал под ним абсолютно div-позицию с тем же размером шрифта. Внутри этого div я отображаю список span с каждым символом входной строки. чтобы охватить, я применил анимацию на 3 секунды, чтобы изменить ее цвет с красного (выделено) на черный (обычное).
Теперь, чтобы заставить список вести себя правильно, мне нужно передать ключ каждому элементу списка, чтобы уникально идентифицировать каждый элемент списка, чтобы только последний введенный символ выделялся, а остальное оставалось прежним.

Что Я пытался

1. Использовать индекс в качестве ключей.
   работает хорошо, пока я вставляю текст в конце, но когда какой-либо текст вставлен между ними изменяется индекс всех следующих элементов, поэтому все они обновляются и поэтому выделяются

2. Использовать символ в качестве ключа.
   , поскольку у нас есть только 26 символов, как только любой символ повторяется, имеют одинаковые клавиши для двух разных элементов списка, и снова он ведет себя странно

3. Использовать символ и контекст вокруг как ключ (т. е. ch + arr[index+1] + arr[index-1] etc..)
   , но опять же, когда дело доходит до схожих шаблонов, таких как "aaaaa" et c .., он ведет себя неожиданно.

4. Использовать генераторы случайных чисел / идентификаторов (uuid et c.) / New Date (). GetTime ().
   но как только элементы обновляются, вызывается функция рендеринга, и все элементы списка получают совершенно новые ключи, поэтому все они обновляют

5. Использование счетчика в родительском компоненте подсчитать общее количество изменений в поле ввода и назначить этот номер в качестве ключа для вновь добавленного символьного компонента.
   Я не знаю, как это реализовать, потому что для этого мне нужно что-то проверить, например, если у элемента еще нет ключа, назначьте новый номер, иначе оставьте старый.

Можно ли дать новый ключ (уникальный) каждому элементу списка в зависимости от того, когда он был создан, чтобы я мог выделить только измененный элемент?

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>
    );
  }
}

вот ссылка Sandbox *

Answer 1

Для достижения sh того, что вам нужно, вы можете использовать просто npm пакет , называемый uuid. В компоненте класса сначала импортируйте его.

import { v4 as uuidv4 } from 'uuid';

Затем вам нужно назначить уникальный идентификатор для самого первого родительского тега компонента, который вы собираетесь использовать повторно.

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

Если у вас есть пользовательский ключ, вы можете использовать его с uuid следующим образом:

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

Надеюсь, это поможет вам.