Reactjs-keys
提供:Dev Guides
ReactJS-キー
React keys は、動的に作成されたコンポーネントを使用する場合、またはユーザーがリストを変更する場合に役立ちます。 key 値を設定すると、変更後にコンポーネントが一意に識別されたままになります。
キーを使用する
一意のインデックス(i)を使用して Content 要素を動的に作成しましょう。 map 関数は、 data 配列から3つの要素を作成します。 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 値を使用して各要素を追跡します。