React Children Yordamchi Dasturlarini O'zlashtirish: To'liq Qo'llanma

React'ning komponent modeli juda kuchli bo'lib, ishlab chiquvchilarga qayta ishlatiladigan qurilish bloklaridan murakkab foydalanuvchi interfeyslarini yaratishga imkon beradi. Buning markazida 'children' (bola elementlar) tushunchasi yotadi – komponentning ochiluvchi va yopiluvchi teglari orasida uzatiladigan elementlar. Garchi oddiy ko'rinsa-da, ushbu bolalarni samarali boshqarish va manipulyatsiya qilish dinamik va moslashuvchan ilovalarni yaratish uchun juda muhimdir. React aynan shu maqsad uchun mo'ljallangan React.Children API ostida bir qator yordamchi dasturlarni taqdim etadi. Ushbu keng qamrovli qo'llanma ushbu yordamchi dasturlarni batafsil o'rganib chiqadi, React'da bola elementlarini manipulyatsiya qilish va iteratsiyani o'zlashtirishingizga yordam beradigan amaliy misollar va eng yaxshi amaliyotlarni taqdim etadi.

React Children Tushunchasi

React'da 'children' komponentning ochiluvchi va yopiluvchi teglari orasida qabul qiladigan tarkibni anglatadi. Bu tarkib oddiy matndan tortib murakkab komponent ierarxiyalarigacha bo'lishi mumkin. Quyidagi misolni ko'rib chiqing:

<MyComponent>
  <p>This is a child element.</p>
  <AnotherComponent />
</MyComponent>

MyComponent ichida props.children xususiyati ushbu ikkita elementni o'z ichiga oladi: <p> elementi va <AnotherComponent /> nusxasi. Biroq, props.children'ga to'g'ridan-to'g'ri kirish va uni manipulyatsiya qilish, ayniqsa, potentsial murakkab tuzilmalar bilan ishlaganda qiyin bo'lishi mumkin. Aynan shu yerda React.Children yordamchi dasturlari yordamga keladi.

React.Children API: Bolalarni Boshqarish Uchun Sizning Asboblar To'plamingiz

React.Children API props.children shaffof bo'lmagan ma'lumotlar tuzilmasini iteratsiya qilish va o'zgartirish uchun statik usullar to'plamini taqdim etadi. Ushbu yordamchi dasturlar props.children'ga to'g'ridan-to'g'ri kirish bilan solishtirganda bolalarni boshqarishning yanada mustahkam va standartlashtirilgan usulini ta'minlaydi.

1. React.Children.map(children, fn, thisArg?)

React.Children.map() ehtimol eng ko'p ishlatiladigan yordamchi dasturdir. U standart JavaScript Array.prototype.map() usuliga o'xshaydi. U children prop'ining har bir to'g'ridan-to'g'ri bolasini aylanib chiqadi va har bir bolaga taqdim etilgan funksiyani qo'llaydi. Natija - o'zgartirilgan bolalarni o'z ichiga olgan yangi to'plam (odatda massiv). Muhimi shundaki, u faqat *bevosita* bolalarga ta'sir qiladi, nevaralarga yoki chuqurroq avlodlarga emas.

Misol: Barcha to'g'ridan-to'g'ri bolalarga umumiy klass nomini qo'shish

function MyComponent(props) {
  return (
    <div className="my-component">
      {React.Children.map(props.children, (child) => {
        // React.isValidElement() bola satr yoki raqam bo'lganda xatoliklarni oldini oladi.
        if (React.isValidElement(child)) {
          return React.cloneElement(child, {
            className: child.props.className ? child.props.className + ' common-class' : 'common-class',
          });
        } else {
          return child;
        }
      })}
    </div>
  );
}

// Foydalanish:
<MyComponent>
  <div className="existing-class">Child 1</div>
  <span>Child 2</span>
</MyComponent>

Ushbu misolda React.Children.map() MyComponent bolalarini aylanib chiqadi. Har bir bola uchun u React.cloneElement() yordamida elementni klonlaydi va "common-class" klass nomini qo'shadi. Yakuniy natija quyidagicha bo'ladi:

<div className="my-component">
  <div className="existing-class common-class">Child 1</div>
  <span className="common-class">Child 2</span>
</div>

React.Children.map() uchun muhim jihatlar:

• Key prop: Bolalarni map qilib, yangi elementlarni qaytarganda, har doim har bir elementning unikal key prop'i borligiga ishonch hosil qiling. Bu React'ga DOM'ni samarali yangilashga yordam beradi.
• null qaytarish: Muayyan bolalarni filtrlash uchun map funksiyasidan null qaytarishingiz mumkin.
• Element bo'lmagan bolalarni boshqarish: Bolalar satrlar, raqamlar yoki hatto null/undefined bo'lishi mumkin. Faqat React elementlarini klonlayotganingiz va o'zgartirayotganingizga ishonch hosil qilish uchun React.isValidElement()'dan foydalaning.

2. React.Children.forEach(children, fn, thisArg?)

React.Children.forEach() React.Children.map()'ga o'xshaydi, lekin u yangi to'plam qaytarmaydi. Buning o'rniga, u shunchaki bolalarni aylanib chiqadi va har bir bola uchun taqdim etilgan funksiyani bajaradi. U ko'pincha qo'shimcha effektlarni bajarish yoki bolalar haqida ma'lumot to'plash uchun ishlatiladi.

Misol: Bolalar ichidagi <li> elementlari sonini sanash

function MyComponent(props) {
  let liCount = 0;

  React.Children.forEach(props.children, (child) => {
    if (child && child.type === 'li') {
      liCount++;
    }
  });

  return (
    <div>
      <p>Number of <li> elements: {liCount}</p>
      {props.children}
    </div>
  );
}

// Foydalanish:
<MyComponent>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <p>Some other content</p>
</MyComponent>

Ushbu misolda React.Children.forEach() bolalarni aylanib chiqadi va topilgan har bir <li> elementi uchun liCount'ni oshiradi. Keyin komponent <li> elementlari sonini render qiladi.

React.Children.map() va React.Children.forEach() o'rtasidagi asosiy farqlar:

• React.Children.map() o'zgartirilgan bolalarning yangi massivini qaytaradi; React.Children.forEach() hech narsa qaytarmaydi.
• React.Children.map() odatda bolalarni o'zgartirish uchun ishlatiladi; React.Children.forEach() qo'shimcha effektlar yoki ma'lumot to'plash uchun ishlatiladi.

3. React.Children.count(children)

React.Children.count() children prop'i ichidagi bevosita bolalar sonini qaytaradi. Bu bola to'plamining hajmini aniqlash uchun oddiy, ammo foydali yordamchi dasturdir.

Misol: Bolalar sonini ko'rsatish

function MyComponent(props) {
  const childCount = React.Children.count(props.children);

  return (
    <div>
      <p>This component has {childCount} children.</p>
      {props.children}
    </div>
  );
}

// Foydalanish:
<MyComponent>
  <div>Child 1</div>
  <span>Child 2</span>
  <p>Child 3</p>
</MyComponent>

Ushbu misolda React.Children.count() 3 ni qaytaradi, chunki MyComponent'ga uchta bevosita bola uzatilgan.

4. React.Children.toArray(children)

React.Children.toArray() children prop'ini (shaffof bo'lmagan ma'lumotlar tuzilmasi) standart JavaScript massiviga o'zgartiradi. Bu bolalarga massivga xos operatsiyalarni, masalan, saralash yoki filtrlashni bajarish kerak bo'lganda foydali bo'lishi mumkin.

Misol: Bolalar tartibini teskari aylantirish

function MyComponent(props) {
  const childrenArray = React.Children.toArray(props.children);
  const reversedChildren = childrenArray.reverse();

  return (
    <div>
      {reversedChildren}
    </div>
  );
}

// Foydalanish:
<MyComponent>
  <div>Child 1</div>
  <span>Child 2</span>
  <p>Child 3</p>
</MyComponent>

Ushbu misolda React.Children.toArray() bolalarni massivga aylantiradi. Keyin massiv Array.prototype.reverse() yordamida teskari aylantiriladi va teskari aylantirilgan bolalar render qilinadi.

React.Children.toArray() uchun muhim jihatlar:

• Hosil bo'lgan massivning har bir elementiga asl kalitlardan olingan yoki avtomatik ravishda yaratilgan kalitlar tayinlanadi. Bu React'ga massiv manipulyatsiyalaridan keyin ham DOM'ni samarali yangilash imkonini beradi.
• Siz har qanday massiv operatsiyasini bajarishingiz mumkin bo'lsa-da, ehtiyot bo'lmasangiz, bolalar massivini to'g'ridan-to'g'ri o'zgartirish kutilmagan xatti-harakatlarga olib kelishi mumkinligini unutmang.

Ilg'or Texnikalar va Eng Yaxshi Amaliyotlar

1. Bolalarni O'zgartirish Uchun React.cloneElement()'dan Foydalanish

Bola elementining xususiyatlarini o'zgartirish kerak bo'lganda, odatda React.cloneElement()'dan foydalanish tavsiya etiladi. Ushbu funksiya mavjud element asosida yangi React elementi yaratadi, bu sizga asl elementni to'g'ridan-to'g'ri o'zgartirmasdan yangi proplarni qo'shish yoki bekor qilish imkonini beradi. Bu o'zgarmaslikni saqlashga va kutilmagan qo'shimcha effektlarning oldini olishga yordam beradi.

Misol: Barcha bolalarga maxsus prop qo'shish

function MyComponent(props) {
  return (
    <div>
      {React.Children.map(props.children, (child) => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child, { customProp: 'Hello from MyComponent' });
        } else {
          return child;
        }
      })}
    </div>
  );
}

// Foydalanish:
<MyComponent>
  <div>Child 1</div>
  <span>Child 2</span>
</MyComponent>

Ushbu misolda React.cloneElement() har bir bola elementiga customProp qo'shish uchun ishlatiladi. Natijada olingan elementlar o'zlarining props obyektida ushbu prop'ga ega bo'ladi.

2. Fragmentlangan Bolalar Bilan Ishlash

React Fragment'lari (<></> yoki <React.Fragment></React.Fragment>) qo'shimcha DOM tuguni qo'shmasdan bir nechta bolalarni guruhlash imkonini beradi. React.Children yordamchi dasturlari fragmentlarni muammosiz boshqaradi va fragment ichidagi har bir bolani alohida bola sifatida qabul qiladi.

Misol: Fragment ichidagi bolalarni iteratsiya qilish

function MyComponent(props) {
  React.Children.forEach(props.children, (child) => {
    console.log(child);
  });

  return <div>{props.children}</div>;
}

// Foydalanish:
<MyComponent>
  <>
    <div>Child 1</div>
    <span>Child 2</span>
  </>
  <p>Child 3</p>
</MyComponent>

Ushbu misolda React.Children.forEach() funksiyasi uchta bolani aylanib chiqadi: <div> elementi, <span> elementi va <p> elementi, garchi dastlabki ikkitasi Fragment'ga o'ralgan bo'lsa ham.

3. Har Xil Bola Turlarini Boshqarish

Yuqorida aytib o'tilganidek, bolalar React elementlari, satrlar, raqamlar yoki hatto null/undefined bo'lishi mumkin. React.Children yordamchi funksiyalari ichida bu har xil turlarni to'g'ri boshqarish muhimdir. React elementlari va boshqa turlarni farqlash uchun React.isValidElement()'dan foydalanish juda muhim.

Misol: Bola turiga qarab har xil kontentni render qilish

function MyComponent(props) {
  return (
    <div>
      {React.Children.map(props.children, (child) => {
        if (React.isValidElement(child)) {
          return <div className="element-child">{child}</div>;
        } else if (typeof child === 'string') {
          return <div className="string-child">String: {child}</div>;
        } else if (typeof child === 'number') {
          return <div className="number-child">Number: {child}</div>;
        } else {
          return null;
        }
      })}
    </div>
  );
}

// Foydalanish:
<MyComponent>
  <div>Child 1</div>
  "This is a string child"
  123
</MyComponent>

Ushbu misol har xil bola turlarini maxsus klass nomlari bilan render qilish orqali qanday boshqarishni ko'rsatadi. Agar bola React elementi bo'lsa, u "element-child" klassiga ega <div>'ga o'raladi. Agar u satr bo'lsa, u "string-child" klassiga ega <div>'ga o'raladi va hokazo.

4. Bolalarni Chuqur Aylanib Chiqish (Ehtiyotkorlik bilan foydalaning!)

React.Children yordamchi dasturlari faqat to'g'ridan-to'g'ri bolalarga ta'sir qiladi. Agar siz butun komponent daraxtini (shu jumladan nevaralar va chuqurroq avlodlarni) aylanib chiqishingiz kerak bo'lsa, siz rekursiv aylanib chiqish funksiyasini amalga oshirishingiz kerak bo'ladi. Biroq, buni qilayotganda juda ehtiyot bo'ling, chunki bu hisoblash jihatidan qimmat bo'lishi va komponent tuzilmangizdagi dizayn xatosini ko'rsatishi mumkin.

Misol: Bolalarni rekursiv aylanib chiqish

function traverseChildren(children, callback) {
  React.Children.forEach(children, (child) => {
    callback(child);
    if (React.isValidElement(child) && child.props.children) {
      traverseChildren(child.props.children, callback);
    }
  });
}

function MyComponent(props) {
  traverseChildren(props.children, (child) => {
    console.log(child);
  });

  return <div>{props.children}</div>;
}

// Foydalanish:
<MyComponent>
  <div>
    <span>Child 1</span>
    <p>Child 2</p>
  </div>
  <p>Child 3</p>
</MyComponent>

Ushbu misol bolalarni rekursiv ravishda aylanib chiqadigan traverseChildren() funksiyasini belgilaydi. U har bir bola uchun taqdim etilgan callback'ni chaqiradi va keyin o'z bolalariga ega bo'lgan har qanday bola uchun o'zini rekursiv ravishda chaqiradi. Yana bir bor, ushbu yondashuvdan tejamkorlik bilan va faqat zarur bo'lganda foydalaning. Chuqur aylanib chiqishdan qochadigan muqobil komponent dizaynlarini ko'rib chiqing.

Xalqarolashtirish (i18n) va React Children

Global auditoriya uchun ilovalar yaratayotganda, React.Children yordamchi dasturlari xalqarolashtirish kutubxonalari bilan qanday o'zaro ta'sir qilishini o'ylab ko'ring. Masalan, agar siz react-intl yoki i18next kabi kutubxonadan foydalanayotgan bo'lsangiz, mahalliylashtirilgan satrlar to'g'ri render qilinishini ta'minlash uchun bolalarni qanday map qilishingizni moslashtirishingiz kerak bo'lishi mumkin.

Misol: react-intl'ni React.Children.map() bilan ishlatish

import { FormattedMessage } from 'react-intl';

function MyComponent(props) {
  return (
    <div>
      {React.Children.map(props.children, (child, index) => {
        if (typeof child === 'string') {
          // Satrli bolalarni FormattedMessage bilan o'rash
          return <FormattedMessage id={`myComponent.child${index + 1}`} defaultMessage={child} />;
        } else {
          return child;
        }
      })}
    </div>
  );
}

// Tarjimalarni mahalliy fayllaringizda aniqlang (masalan, en.json, fr.json):
// {
//   "myComponent.child1": "Tarjima qilingan bola 1",
//   "myComponent.child2": "Tarjima qilingan bola 2"
// }

// Foydalanish:
<MyComponent>
  "Child 1"
  <div>Some element</div>
  "Child 2"
</MyComponent>

Ushbu misol satrli bolalarni react-intl'dan olingan <FormattedMessage> komponentlari bilan qanday o'rashni ko'rsatadi. Bu sizga foydalanuvchining mahalliy sozlamalariga qarab satrli bolalarning mahalliylashtirilgan versiyalarini taqdim etish imkonini beradi. <FormattedMessage> uchun id prop'i sizning mahalliy fayllaringizdagi kalitga mos kelishi kerak.

Umumiy Foydalanish Holatlari

• Layout komponentlari: Bolalar sifatida ixtiyoriy tarkibni qabul qila oladigan qayta ishlatiladigan layout komponentlarini yaratish.
• Menyu komponentlari: Komponentga uzatilgan bolalarga asoslanib, menyu elementlarini dinamik ravishda yaratish.
• Tab komponentlari: Faol tabni boshqarish va tanlangan bolaga qarab tegishli tarkibni render qilish.
• Modal komponentlari: Bolalarni modalga xos uslublar va funksionallik bilan o'rash.
• Forma komponentlari: Forma maydonlarini aylanib chiqish va umumiy validatsiya yoki uslublarni qo'llash.

Xulosa

React.Children API React komponentlarida bola elementlarini boshqarish va manipulyatsiya qilish uchun kuchli vositalar to'plamidir. Ushbu yordamchi dasturlarni tushunib, ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarni qo'llash orqali siz yanada moslashuvchan, qayta ishlatiladigan va qo'llab-quvvatlanadigan komponentlar yaratishingiz mumkin. Ushbu yordamchi dasturlardan oqilona foydalanishni unutmang va har doim murakkab bola manipulyatsiyalarining ishlashga ta'sirini, ayniqsa katta komponent daraxtlari bilan ishlaganda, hisobga oling. React'ning komponent modelining kuchini qabul qiling va global auditoriya uchun ajoyib foydalanuvchi interfeyslarini yarating!

Ushbu texnikalarni o'zlashtirib, siz yanada mustahkam va moslashuvchan React ilovalarini yozishingiz mumkin. Ishlab chiqish jarayonida kodning ravshanligi, ishlashi va qo'llab-quvvatlanishiga ustuvorlik berishni unutmang. Dasturlash maroqli bo'lsin!