Поиск…


Вступление

Ключи реагирования используются для идентификации списка элементов DOM из одной и той же иерархии.

Поэтому, если вы выполняете итерацию по массиву, чтобы показать список элементов li, каждому элементу li нужен уникальный идентификатор, заданный свойством ключа. Обычно это может быть идентификатор вашего элемента базы данных или индекс массива.

замечания

Использование индекса массива в качестве ключа обычно не рекомендуется, когда массив будет меняться со временем. Из документов React:

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

Хороший пример: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Использование идентификатора элемента

Здесь у нас есть список предметов todo, которые передаются в реквизиты нашего компонента.

Каждый объект todo имеет свойство text и id. Представьте, что свойство id происходит из бэкэнд-хранилища данных и является уникальным числовым значением:

todos = [
  {
    id: 1,
    text: 'value 1'
  },
  {
    id: 2,
    text: 'value 2'
  },
  {
    id: 3,
    text: 'value 3'
  },
  {
    id: 4,
    text: 'value 4'
  },
];

Мы устанавливаем ключевой атрибут каждого итерированного элемента списка todo-${todo.id} чтобы реакция могла идентифицировать его внутри:

render() {
  const { todos } = this.props;
  return (
    <ul>
      { todos.map((todo) =>
        <li key={ `todo-${todo.id}` }>
          { todo.text }
        </li>
      }
    </ul>
  );
}

Использование индекса массива

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

render() {
  const { todos } = this.props;
  return (
    <ul>
      { todos.map((todo, index) =>
        <li key={ `todo-${index}` }>
          { todo.text }
        </li>
      }
    </ul>
  );
}


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow