Şərtdən asılı olaraq komponent necə çəkilir?

Əsasən aşağıdakı yanaşmalar istifadə olunur:

• Ternar operator və ya if ilə şərti render: Ən sadə üsul.

  // React-də ternar operator nümunəsi
  function MənimKomponentim({ daxil olub }) {
    return (
      <div>
        {daxil olub ? (
          <p>Salam, istifadəçi!</p>
        ) : (
          <button>Daxil ol</button>
        )}
      </div>
    );
  }
  

  // Funksional komponent daxilində if nümunəsi
  function BaşqaKomponent({ yüklənir }) {
    if (yüklənir) {
      return <p>Yüklənir...</p>;
    }
    return <h1>Məlumatlar yükləndi!</h1>;
  }
  

• Məntiqi AND (&&) operatoru: Şərt doğru olduqda komponenti göstərmək üçün əlverişlidir.

  // React-də && nümunəsi
  function Mesajlar({ say }) {
    return (
      <div>
        {say > 0 && <p>Sizdə {say} yeni mesaj var.</p>}
      </div>
    );
  }
  

• Funksiyalar və uşaqlar komponentlərdən istifadə: Render məntiqini ayrı funksiyalara və ya komponentlərə ayırmaq kodun oxunuşunu və təkrar istifadəsini yaxşılaşdırır.

  // React-də funksiya ilə nümunə
  function renderEtmə(rol) {
    if (rol === 'admin') {
      return <AdminPanel />;
    } else if (rol === 'istifadəçi') {
      return <İstifadəçiProfil />;
    }
    return <GirişSəhifəsi />;
  }
  
  function App({ rol }) {
    return (
      <div>
        {renderEtmə(rol)}
      </div>
    );
  }
  

• Massivlər və map metodu: Məlumatlara əsaslanan komponentlərin siyahısını göstərmək üçün.

  // React-də map nümunəsi
  function ElementlərSiyahısı({ elementlər }) {
    return (
      <ul>
        {elementlər.map(element => (
          <li key={element.id}>{element.ad}</li>
        ))}
      </ul>
    );
  }
  

• CSS display / visibility: Elementi gizlədir və ya göstərir, lakin komponent hələ də render olunur. DOM strukturuna təsir etməyən sadə hallarda uyğundur.

  /* CSS nümunəsi */
  .gizli {
    display: none;
  }
  

  // React-də CSS sinfi tətbiqi nümunəsi
  function GöstəriləbilənMəzmun({ görünür }) {
    return (
      <div className={görünür ? '' : 'gizli'}>
        <p>Bu məzmun gizlədilir.</p>
      </div>
    );
  }
  

Yöntəm seçimi şərtin mürəkkəbliyinə və komponentin strukturuna bağlıdır. Sadə şərtlər üçün tez-tez ternar operator və ya && kifayət edir. Daha mürəkkəb ssenarilər və kodun yaxşı təşkili üçün ayrıca funksiyalar və ya komponentlər istifadə etmək tövsiyə olunur. CSS display / visibility istifadə edərkən, elementin DOM-dan tamamilə silinməsini istəmirsinizsə, diqqətli olun.