これはFacebookのドキュメントからです

Question

動的リスト内のキーに反応：、

リストが再レンダリングされると反応させ、新しいバージョン の各要素を取得し、前のリストで一致するキーと1を探します。キーに が追加されると、コンポーネントが作成されます。キーが削除されると、 コンポーネントが破棄されます。キーはReactに各 コンポーネントの識別情報を伝えるので、rerenders間の状態を維持することができます。 コンポーネントのキーを変更すると、コンポーネントが完全に破棄され、 が新しい状態で再作成されます。

動的リストを作成するときには必ず適切なキーを割り当てることを強くお勧めします。適切なキーを手元にない場合は、 は、データを再構成して操作することを検討したい場合があります。

あなたが任意のキーを指定しない場合、警告を表示し、キーとして配列のインデックスを使用して にフォールバックしますリアクト - あなたが今までのアイテムを削除/リスト内の要素を並べ替えたり、追加 場合は正しい選択ではありませんどこでも のリストの一番下にあります。明示的にkey = {i}を渡すと、警告メッセージは表示されませんが、ほとんどの場合は推奨されません。

コンポーネントキーは、グローバルに一意である必要はなく、直接の兄弟に対して一意の相対番号 のみが必要です。

私はそれを得ていません。リストの中に次のようなキーを入力しないと：

return (
     <li> 
      <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a> 
     </li> 
    ); 

何が問題なのですか？リストに3つの要素があり、キーが[0,1,2]で、1を削除した場合、どうなりますか？

Answer 1

各リストにはReactのみを使用するためのキーが必要です。このように<li key={item.uniqueId}>itemのuniqueIdは項目のグループで一意です。したがって、このリストを変更すると、Reactはその変更をどのように処理するかを知っています。このキーは、リスト内の単一項目のインデックス/位置付けとは異なります。

ので、あなたがこのような何かやるようにあなたは、マップを使用してリストを作成する場合：あなたはアイテムのインデックスを使用することができます上に掲載ドキュメントで

return (
    <ul> 
     {this.props.items.map(item => <ItemComponent key={item.id} {...item} />)} 
    </ul> 
) 

を（すなわち、(index, i) => <ItemComponent key={i}）が、それはですお勧めしません。あなたはこのようにそれを行うことができ

return (
    <li> 
    {/* your code here */} 
    </li> 
) 

またはあなたの例を使用して：：ItemComponentリストコンポーネントで

、

return (
    <li key={this.props.uniqueId}> 
    <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a> 
    </li> 
); 

あなたが移動し、任意の時間を削除するか、このリストに項目を追加すると反応が知っているだろうそれをレンダリングする方法。