React
Ключи реагирования
Поиск…
Вступление
Ключи реагирования используются для идентификации списка элементов 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>
);
}
