Koşullu render nedir?

Bir koşula göre farklı içerik göstermenin mümkün olduğunu öğrenirsin.

Koşullu render nedir?

Koşullu render, bir koşula göre farklı içerik göstermektir. Örneğin kullanıcı giriş yaptıysa Dashboard, yapmadıysa Login göstermek gibi.

React'te koşullu render için birkaç yöntem vardır: if deyimi, ternary operatör cond ? a : b, mantıksal AND && ve erken return. Her birinin uygun olduğu durumlar vardır.

Temel yöntem: koşuldan dönen değer ya geçerli JSX'dir ya da null, false, undefined (React bunları çizmez).

Koşullu render yaklaşımları

Üç yaygın yaklaşım vardır. Birincisi ternary: { 'isLoggedIn ? <Dashboard /> : <Login />' }. İki seçenek arasında seçim yaparken idealdir.

İkincisi mantıksal AND: { 'hasError && <Error />' }. Yalnızca bir koşul sağlanınca bir şey göstermek için idealdir.

Üçüncüsü erken return: bileşenin başında if (!user) return null; yazıp erken çıkmak. Karmaşık koşullarda okunurluğu artırır.

Uygulama Giriş durumuna göre banner

Aşağıdaki iskeleti tamamla. Banner adında bir bileşen yaz; ({ '{ isLoggedIn }' }) parametresi alsın. isLoggedIn true ise <p>Hosgeldin</p>, false ise <p>Giriş yap</p> döndürsün (ternary kullan). Dışa aktarmayı unutma.

Örnek çözümü göster

function Banner({ isLoggedIn }) {
  return isLoggedIn ? <p>Hosgeldin</p> : <p>Giriş yap</p>;
}

export default Banner;

Kendini test et

Koşullu render ne yapar?
- Koşula göre farklı içerik gösterir
- Stil değiştirir
- State saklar
- DOM günceller
Cevabı göster

Koşula göre farklı içerik gösterir — Koşullu render koşula göre içerik gösterir.

Koşullu render yazımı

Koşul ____ : doğru : yanlış.

Cevabı göster

Koşul ? : doğru : yanlış.

Yaklaşımları eşleştir

cond ? a : b

Ternary
cond && a

Mantıksal AND
if (x) return

Erken return
null

Çizilmez

Sıradaki ders: Ternary operatör

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler