React JS key — ключи

От автора: React key используется при работе с динамически создаваемыми компонентами, или когда ваши списки изменяются пользователями. Установка значения ключа позволяет сделать компоненты однозначно идентифицированными после изменения.

Использование ключей

Давайте динамически создадим элементы контента с уникальным индексом (i). Функция map создаст три элемента из массива данных. Поскольку значение ключа должно быть уникальным для каждого элемента, мы назначаем i в качестве ключа для каждого созданного элемента.

App.jsx

import React from 'react'; class App extends React.Component { constructor() { super(); this.state = { data:[ { component: 'First...', id: 1 }, { component: 'Second...', id: 2 }, { component: 'Third...', id: 3 } ] } } render() { return ( <div> <div> {this.state.data.map((dynamicComponent, i) => <Content key = {i} componentData = {dynamicComponent}/>)} </div> </div> ); }
}
class Content extends React.Component { render() { return ( <div> <div>{this.props.componentData.component}</div> <div>{this.props.componentData.id}</div> </div> ); }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));

Мы получим следующий результат для значений ключа каждого элемента.

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

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.