نحوه استفاده از کلیدهای React برای جلوگیری از تضاد کامپوننت

import { useState } from "react"
import { Counter } from "./Counter"

export default function App() {
  const [isKingsley, setIsKingsley] = useState(true)

  return (
    <div>
      { isKingsley ? 
        (<div>
          <Counter name="Kingsley" /> 
        </div>)
        : 
        (<section>
          <Counter name="Sally" /> 
        </section>)
      }
      <br />
      <button onClick={() => setIsKingsley(k => !k)}> Swap </button>
    </div>
  )
}

اگر شمارنده “Kingsley” را افزایش دهید و روی Swap کلیک کنید، وضعیت به 0 بازنشانی می شود. باز هم، این اتفاق می افتد زیرا ساختار دو درخت DOM متفاوت است.

وقتی متغیر isKingsley درست باشد، ساختار به صورت div > div > شمارنده (div حاوی div، حاوی شمارنده) خواهد بود. هنگامی که با استفاده از دکمه حالت شمارنده را تعویض می کنید، ساختار به div > بخش > شمارنده تبدیل می شود. به دلیل این اختلاف، React به طور خودکار یک شمارنده جدید را با وضعیت بازنشانی ارائه می کند.

ممکن است همیشه نخواهید ساختار نشانه گذاری خود را به این شکل تغییر دهید. راه دوم برای رفع این اشکال از نیاز به نشانه گذاری های مختلف جلوگیری می کند.

استفاده از کلیدها برای ارائه یک کامپوننت تازه

کلیدها به React اجازه می‌دهند تا بین عناصر در طول فرآیند رندر تفاوت قائل شود. بنابراین اگر دو عنصر دارید که دقیقاً یکسان هستند و می خواهید به React سیگنال دهید که یکی با دیگری متفاوت است، باید یک ویژگی کلیدی منحصر به فرد برای هر عنصر تنظیم کنید.

به هر شمارنده یک کلید اضافه کنید، مانند:

import { useState } from "react"
import { Counter } from "./Counter"

export default function App() {
  const [isKingsley, setIsKingsley] = useState(true)

  return(
    <div>
      { isKingsley ? 
        <Counter key="Kingsley" name="Kingsley" /> : 
        <Counter key="Sally" name="Sally" /> 
      }
      <br />
      <button onClick={() => setIsKingsley(k => !k)}> Swap </button>
    </div>
  )
}

اکنون، وقتی شمارنده «کینگزلی» را افزایش می‌دهید و روی Swap کلیک می‌کنید، React یک شمارنده جدید ارائه می‌کند و حالت را به صفر بازنشانی می‌کند.

هنگامی که آرایه ای از موارد مشابه را ارائه می کنید، باید از کلیدها استفاده کنید، زیرا React تفاوت بین هر مورد را نمی داند.

export default function App() {
  const names = ["Kingsley", "John", "Ahmed"]

  return(
    <div>
      { names.map((name, index) => {
        return <Counter key={index} name={name} />
      })}
    </div>
  )
}

هنگامی که کلیدها را اختصاص می دهید، React یک شمارنده جداگانه با هر آیتم مرتبط می کند. به این ترتیب، می تواند هر تغییری را که در آرایه ایجاد می کنید منعکس کند.

یکی دیگر از موارد استفاده از کلید پیشرفته

همچنین می توانید از کلیدها برای مرتبط کردن یک عنصر با عنصر دیگر استفاده کنید. برای مثال، ممکن است بخواهید یک عنصر ورودی را با عناصر مختلف بسته به مقدار متغیر حالت مرتبط کنید.

برای نشان دادن، مؤلفه App را تغییر دهید:

import { useState } from "react"

export default function App() {
  const [isKingsley, setIsKingsley] = useState(true)

  return(
    <div>
      { isKingsley ? <div>Kingsley's Score</div> : <div>Sally's score</div> }
      <input key={ isKingsley? "Kingsley" : "Sally" } type="number"/>
      <br />
      <button onClick={() => setIsKingsley(k => !k)}> Swap </button>
    </div>
  )
}

اکنون، هر بار که بین عناصر