React
反応の鍵
サーチ…
前書き
反応中のキーは、内部的に同じ階層のDOM要素のリストを識別するために使用されます。
したがって、配列全体を繰り返してli要素のリストを表示する場合、各li要素はkeyプロパティで指定された一意の識別子を必要とします。これは通常、データベースアイテムのIDまたは配列のインデックスになります。
備考
アレイインデックスをキーとして使用することは、アレイが時間とともに変化する場合には一般的に推奨されません。 React Docsから:
最後の手段として、配列内のアイテムのインデックスをキーとして渡すことができます。アイテムの並べ替えが一度も行われない場合でも、リオーダーは遅くなります。
これに関する良い例: https : //medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
要素のidを使う
ここでは、コンポーネントの小道具に渡されるToDo項目のリストがあります。
各ToDo項目には、textプロパティとidプロパティがあります。 idプロパティがバックエンドデータストアから来ており、一意の数値であるとします。
todos = [
{
id: 1,
text: 'value 1'
},
{
id: 2,
text: 'value 2'
},
{
id: 3,
text: 'value 3'
},
{
id: 4,
text: 'value 4'
},
];
反応が内部的にそれを識別できるように、各反復リスト要素のキー属性をtodo-${todo.id}
設定しました:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo) =>
<li key={ `todo-${todo.id}` }>
{ todo.text }
</li>
}
</ul>
);
}
配列インデックスの使用
一意のデータベースIDを持っていない場合は、次のように配列の数値インデックスを使用することもできます。
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo, index) =>
<li key={ `todo-${index}` }>
{ todo.text }
</li>
}
</ul>
);
}
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow