React ro‘yxatlari

React-da siz ro‘yxatlarni qandaydir sikl bilan ko‘rsatasiz.

JavaScript map() massiv usuli odatda afzal metod hisoblanadi.

Agar map() metodini eslab olishingiz kerak bo‘lsa, ES6 Array map() bo‘limini ko‘rib chiqing.

Misol:

Keling, map() metodi yordamida oddiy ro‘yxat yaratamiz:

function MyCars() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>My Cars:</h1>
      <ul>
        {cars.map((car) => <li>I am a { car }</li>)}
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <MyCars />
);

Misolni ishga tushirish »

Ushbu kodni React muhitida ishga tushirganingizda, u ishlaydi, lekin list elementlari uchun "kalit" mavjud emasligi haqida ogohlantirish olasiz.

React ro‘yxatidagi kalitlar

Kalitlar Reactga elementlarni kuzatish imkonini beradi. Shunday qilib, agar biror element yangilangan yoki o‘chirilgan bo‘lsa, butun list o‘rniga faqat o‘sha element qayta render qilinadi.

Kalitlar birodarlar orasida noyob bo‘lishi kerak, lekin ular butun ilovada yagona bo‘lishi shart emas.

Odatda, kalit har bir elementga tayinlangan noyob identifikator bo‘lishi kerak. Oxirgi chora sifatida siz massiv indeksidan kalit sifatida foydalanishingiz mumkin.

Misol:

Mana yuqoridagi misol, kalitlar bilan:

function MyCars() {
  const cars = [
    {id: 1001, brand: 'Ford'},
    {id: 1002, brand: 'BMW'},
    {id: 1003, brand: 'Audi'}
  ];
  return (
    <>
      <h1>My Cars:</h1>
      <ul>
        {cars.map((car) => <li key={car.id}>I am a { car.brand }</li>)}
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <MyCars />
);

Misolni ishga tushirish »

Massiv indeksini kalit sifatida ishlatish

Massiv indeksini kalit sifatida ishlatish mumkin bo‘lsa-da, quyidagi hollarda tavsiya etilmaydi:

Ro‘yxat statik (o‘zgarmaydi)
Ro‘yxat hech qachon o‘zgartirilmaydi yoki filtrlanmaydi
Ro‘yxatdagi elementlarning identifikatorlari yo‘q

Misol:

Massiv indekslarini kalit sifatida ishlatish (dinamik listlar uchun tavsiya etilmaydi):

function MyCars() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>My Cars:</h1>
      <ul>
        {cars.map((car, index) => <li key={index}>I am a { car }</li>)}
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <MyCars />
);

Misolni ishga tushirish »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish