Koşula bağlı olarak bileşen nasıl çizilir?

Genellikle aşağıdaki yaklaşımlar kullanılır:

• Üçlü operatör veya if kullanarak koşullu render: En basit yöntem.

  // React'te üçlü operatör örneği
  function MyComponent({ oturumAçık }) {
    return (
      <div>
        {oturumAçık ? (
          <p>Kullanıcıya merhaba!</p>
        ) : (
          <button>Giriş yap</button>
        )}
      </div>
    );
  }
  

  // Fonksiyonel bileşen içinde if örneği
  function BaşkaBileşen({ yükleniyor }) {
    if (yükleniyor) {
      return <p>Yükleniyor...</p>;
    }
    return <h1>Veriler yüklendi!</h1>;
  }
  

• Mantıksal AND (&&): Sadece doğruysa bileşeni göstermek istediğinizde kullanışlıdır.

  // React'te && ile örnek
  function MesajSayısı({ say }) {
    return (
      <div>
        {say > 0 && <p>Sizde {say} yeni mesaj var.</p>}
      </div>
    );
  }
  

• Fonksiyonlar ve çocuk bileşenler kullanmak: Render mantığını ayrı fonksiyonlara veya bileşenlere çıkarmak, okunabilirliği ve yeniden kullanılabilirliği artırır.

  // React'te fonksiyon kullanımıyla örnek
  function içerikRender(rol) {
    if (rol === 'admin') {
      return <AdminPanel />;
    } else if (rol === 'kullanıcı') {
      return <KullanıcıProfili />;
    }
    return <GirişSayfası />;
  }
  
  function App({ rol }) {
    return (
      <div>
        {içerikRender(rol)}
      </div>
    );
  }
  

• Diziler ve map metodu: Veri bazlı listeyi göstermek için kullanılır.

  // React'te map ile örnek
  function ÖğelerListesi({ öğeler }) {
    return (
      <ul>
        {öğeler.map(öğe => (
          <li key={öğe.id}>{öğe.ad}</li>
        ))}
      </ul>
    );
  }
  

• CSS display / visibility: Bir öğeyi gizler veya gösterir, ancak bileşen yine de render edilir. DOM yapısını etkilemeyen basit durumlar için uygundur.

  /* CSS örneği */
  .gizle {
    display: none;
  }
  

  // React'te CSS sınıfı uygulama örneği
  function Gizlenebilirİçerik({ görünür }) {
    return (
      <div className={görünür ? '' : 'gizle'}>
        <p>Bu içerik gizleniyor.</p>
      </div>
    );
  }
  

Yöntem seçimi, koşulun karmaşıklığına ve bileşenin yapısına bağlıdır. Basit koşullar için genellikle ternary veya && yeterlidir. Daha karmaşık senaryolar ve kodun daha iyi organize edilmesi için ayrı fonksiyonlar veya bileşenler kullanmak önerilir. CSS display / visibility kullanırken, öğeyi DOM'dan tamamen kaldırmak gerekmediği durumlarda dikkatli olunmalıdır.