React JS key — ключи

Дата публикации: 2018-07-24

От автора: 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;

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>

{this.state.data.map((dynamicComponent, i) => <Content

key = {i} componentData = {dynamicComponent}/>)}

</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'));

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

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

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

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

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

Метки: react