Shartga qarab komponentni qanday chizish mumkin…

Odatda quyidagi yondashuvlar qoʻllaniladi:

Ternar operator yoki if yordamida shartli render qilish: Eng oddiy usul.

// Reactda ternar operator bilan misol
function MeningKomponent({ roʻyxatdan oʻtgan }) {
  return (
    <div>
      {roʻyxatdan oʻtgan ? (
        <p>Salom, foydalanuvchi!</p>
      ) : (
        <button>Kirish</button>
      )}
    </div>
  );
}

// Funktsional komponent ichida if bilan misol
function BoshqaKomponent({ yuklanmoqda }) {
  if (yuklanmoqda) {
    return <p>Yuklanmoqda...</p>;
  }
  return <h1>Maʼlumotlar yuklandi!</h1>;
}

Mantiqiy AND (&&) operatori: Faqat shart haqiqat bo‘lsa, komponentni ko‘rsatish uchun qulay.

// Reactda && bilan misol
function Xabarlar({ son }) {
  return (
    <div>
      {son > 0 && <p>Sizda {son} yangi xabarlar mavjud.</p>}
    </div>
  );
}

Funktsiyalar va bolalar komponentlardan foydalanish: Render qilish mantiqini alohida funksiyalar yoki komponentlarga ajratish, kodni osonroq o‘qish va qayta ishlatish uchun.

// Reactda funktsiya bilan misol
function renderKontent(rol) {
  if (rol === 'admin') {
    return <AdminPanel />;
  } else if (rol === 'foydalanuvchi') {
    return <FoydalanuvchiProfil />;
  }
  return <KirishSahifasi />;
}

function App({ rol }) {
  return (
    <div>
      {renderKontent(rol)}
    </div>
  );
}

Massivlar va map metodidan foydalanish: Maʼlumotlarga asoslangan komponentlar ro‘yxatini ko‘rsatish uchun.

// Reactda map bilan misol
function ElementlarRoʻyxati({ elementlar }) {
  return (
    <ul>
      {elementlar.map(element => (
        <li key={element.id}>{element.nomi}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Elementni yashirish yoki ko‘rsatish, lekin komponent hali ham render qilinadi. Oddiy holatlar uchun mos, agar holat DOM tuzilmasiga taʼsir qilmasa.

/* CSS misol */
.yashirin {
  display: none;
}

// Reactda CSS sinfini qo‘llash misoli
function OʻzgartiriladiganKontent({ koʻrinadi }) {
  return (
    <div className={koʻrinadi ? '' : 'yashirin'}>
      <p>Ushbu kontent yashiriladi.</p>
    </div>
  );
}

Usul tanlovi shartning murakkabligi va komponentning tuzilishiga bog‘liq. Oddiy shartlar uchun odatda ternar operator yoki && kifoya qiladi. Murakkabroq holatlar va kodni yaxshiroq tashkil qilish uchun alohida funksiyalar yoki komponentlar ishlatish tavsiya etiladi. CSS display / visibility ni ehtiyotkorlik bilan qo‘llang, agar elementni DOMdan to‘liq olib tashlamaslik kerak bo‘lsa.

Shartga qarab komponentni qanday chizish mumkin?