React キーを使用してコンポーネントの競合を回避する方法

import { useState } from "react"import { Counter } from "./Counter"export default function App() {const [isKingsley, setIsKingsley] = useState(true)return ({ isKingsley ?():()} setIsKingsley(k => !k)}> Swap )}

「Kingsley」カウンターを増やしてSwapをクリックすると、状態は 0 にリセットされます。これも、2 つの DOM ツリーの構造が異なるためです。

isKingsley変数がtrueの場合、構造はdiv>div>Counter (div が div を含み、div が Counter を含む) になります。ボタンを使用してカウンターの状態を入れ替えると、構造はdiv>section>Counterになります。この不一致により、React は自動的にリセットされた状態の新しい Counter をレンダリングします。

このようにマークアップの構造を常に変更したいとは限らない場合があります。このバグを解決する 2 番目の方法は、異なるマークアップの必要性を回避します。

キーを使用して新しいコンポーネントをレンダリングする

キーを使用すると、React はレンダリング プロセス中に要素を区別できます。したがって、まったく同じ 2 つの要素があり、一方を他方と異なるものであることを React に通知したい場合は、各要素に一意のキー属性を設定する必要があります。

次のように、各カウンターにキーを追加します。

import { useState } from "react"import { Counter } from "./Counter"export default function App() {const [isKingsley, setIsKingsley] = useState(true)return({ isKingsley ? :} setIsKingsley(k => !k)}> Swap )}

「Kingsley」カウンターを増やしてSwapをクリックすると、React は新しいカウンターをレンダリングし、状態をゼロにリセットします。

React は各項目の違いがわからないため、同じタイプの項目の配列をレンダリングするときにもキーを使用する必要があります。

export default function App() {const names = ["Kingsley", "John", "Ahmed"]return({ names.map((name, index) => {return })})}

キーを割り当てると、React は各項目に別々のカウンターを関連付けます。そのようにすることで、配列に加えた変更を反映させることができます。

キーの別の高度なユースケース

キーを使用して、要素を別の要素に関連付けることもできます。たとえば、状態変数の値に応じて、入力要素を異なる要素に関連付ける場合があります。

例として、App コンポーネントを微調整します。

import { useState } from "react"export default function App() {const [isKingsley, setIsKingsley] = useState(true)return({ isKingsley ? Kingsley's Score : Sally's score } setIsKingsley(k => !k)}> Swap )}

これで、Kingsley と Sally の