ReactJS-キー

React keys動的に作成されたコンポーネントを操作する場合、またはリストがユーザーによって変更される場合に役立ちます。の設定key valueは、変更後にコンポーネントを一意に識別し続けます。

キーの使用

動的に作成しましょう Content一意のインデックスを持つ要素(i)。ザ・map 関数は私たちから3つの要素を作成します dataアレイ。以来key 値はすべての要素で一意である必要があります。作成された各要素のキーとして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 各要素を追跡するための値。