Основы ReactJS

Keys ReactJS

keysReact очень полезен при использовании динамически созданных компонентов или при изменении списка пользователей. УстановкаkeyЗначение позволит компоненту с изменениями оставаться уникальным.

Использование Keys

Давайте динамически создадим элементы Content с уникальным индексом (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 будет использовать этиkeyСледить за каждым элементом с помощью значений.

Router ReactJS Refs ReactJS