Смешивание текста с реагирующими компонентами

Question

Мне нужен компонент с выводом чистого текста, смешанного с реагирующими компонентами.что-то вроде:

<div>
  lorem ipsum <b>dolor</b>,{' '}
  some <a href="#">link</a> and{' '}
  again text.
  <i>great</i>.
</div>

При рендеринге response выдает предупреждение

Каждый дочерний элемент в массиве или итераторе должен иметь уникальный «ключ»

Мне было интересно, как решить эту проблему.

Answer 1

С https://reactjs.org/docs/lists-and-keys.html

Клавиши помогают React определить, какие элементы были изменены, добавлены или удалены.Ключи должны быть предоставлены элементам в массиве, чтобы дать элементам стабильную идентификацию

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

<YourComponent key={index} />

Но имейте в виду, что индекс элемента должен быть последним средством для ключа.

Если у вас нет стабильных идентификаторов для визуализированных элементов, вы можете использовать индекс элемента в качестве ключа в качестве последнегоКурорт:

Answer 2

Снять лишние фигурные скобки

<div>
  lorem ipsum <b>dolor</b>,some <a href="#">link</a> and again text <i>great</i>.
</div>