ReactJS: Dinamik komponentlarni shartli ko'rsatish bilan qurish

Reactda shartli renderlash nima?

React bu samarali foydalanuvchi interfeysi komponentlarini yaratish uchun foydalaniladigan deklarativ va ochiq manbali JavaScript-ning oldingi kutubxonasidir. Shartli renderlash - bu React-dagi xususiyat bo'lib, ishlab chiquvchilarga ma'lum shartlar, holatlar, foydalanuvchi kiritishlari yoki ma'lumotlar mavjudligi asosida komponentlar ichida turli komponentlar yoki tarkiblarni ko'rsatish imkonini beradi. Ko'proq qayta foydalanish mumkin va dinamik komponentlarni yoqish orqali ortiqcha kodni kamaytirishi mumkin.

Komponentlar turli sharoitlarga qarab foydalanuvchilarga aniq natijalarni ko'rsatishi uchun biz if/else bayonotlar, rejim holati bayonotlari kabi mantiqiy JavaScript sintaksisidan foydalanishimiz mumkin. em>, uchlik operatorlar va “&&” operatorlarikoʻrsatuvchi komponent nimani qaytarishini oʻzgartirish uchun.

Quyidagi misollarda UserList komponenti User komponentining ota-onasi hisoblanadi. Ota-ona komponentimizda biz nom (string) va isVerified (boolean) rekvizitlarini oladigan bolalar komponentlarini ko'rsatmoqdamiz.

if/else

function User({ name, isVerified }) {
  if(isVerified) {
    return <li className="user">{name}⭐️</li>;
  }
  return <li className="user">{name}</li>;
}

export default function UserList() {
  return (
    <div>
      <h1>List of Users:</h1>
      <ul>
        <User
          name={"John"}
          isVerified={false}
        />
        <User
          name={"Mary"}
          isVerified={true}
        />
        <User
          name={"Ryan"}
          isVerified={false}
        />
      </ul>
    </div>
  );
}

Agar foydalanuvchi uchun isVerified rekvizit to'g'ri bo'lsa, Foydalanuvchi komponenti foydalanuvchi nomi yonida “⭐️” belgisini qaytaradi.

almashtirish

function User({ name, isVerified }) {
  switch(isVerified) {
    case true:
      return <li className="user">{name}⭐️</li>;
    case false:
      return <li className="user">{name}</li>;
  }
}

Xuddi shu mantiq yuqorida ko'rsatilgan switch case bayonotida ifodalanishi mumkin.

uchlik

function User({ name, isVerified }) {
  return (
    <li className="user">
      {isVerified ? name + "⭐️" : name} 
    </li>
  );
}

Uchlik operator ortiqchalikni kamaytirish va yuqoridagi kodda ko'rsatilgan toza kodni ishlab chiqarishda juda foydali.

// ternary operator syntax
condition ? truthyExpression : falsyExpression

&&

function User({ name, isVerified }) {
  return (
    <li className="user">
      {name} {isVerified && "⭐️"} 
    </li>
  );
}

Nihoyat, && operatoridan foydalanish bir xil mantiqiy natijaga erishish uchun kamroq kod yozishning yana bir usuli hisoblanadi. Agar isVerified rost ga teng boʻlsa, yulduzcha koʻrsatiladi. Aks holda, faqat ism ko'rsatiladi.

Shartli renderlash ReactJS-ning muhim xususiyati hisoblanadi, chunki u ishlab chiquvchilarga interaktiv va dinamik UI komponentlarini yaratishga imkon beradi. Shartli rendersiz, turli stsenariylar va sharoitlarga moslasha oladigan qayta foydalanish mumkin bo'lgan komponentlarni yaratish ancha qiyin bo'ladi.

Shartli renderlash haqida ko'proq ma'lumot olish uchun ba'zi foydali manbalar: