ReactJS 基礎教程

ReactJS キー

keys動的に作成されたコンポーネントやユーザーのリストの変更時にReactは非常に役立ちます。key値は変更後のコンポーネントにユニークな識別子を保持します。

Keysを使用

ユニークなインデックス(i)を持つContent要素を動的に作成する。　map関数はデータ配列から3つの要素を作成します。各要素のキー値はユニークでなければならないため、作成される各要素に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各要素を追跡するための値です。

ReactJS ルーター ReactJS リファレンス