Koşullu render nedir?
- React kursu
- Başlangıç
- Ders 22/84
- 4 dk
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.
Başlangıç kodu
// Banner bileşenini buraya yazÖrnek çözüm
function Banner({ isLoggedIn }) {
return isLoggedIn ? <p>Hosgeldin</p> : <p>Giriş yap</p>;
}
export default Banner;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Koşullu render ne yapar?
- Koşula göre farklı içerik gösterir Doğru cevap
- Stil değiştirir
- State saklar
- DOM günceller
Açıklama: Koşullu render koşula göre içerik gösterir.
2 Koşullu render yazımı
Koşul ____ : doğru : yanlış.Koşul ? : doğru : yanlış.Açıklama: && ve || farklı anlamlar taşır.
3 Yaklaşımları eşleştir
| Kavram | Anlamı |
|---|---|
cond ? a : b |
Ternary |
cond && a |
Mantıksal AND |
if (x) return |
Erken return |
null |
Çizilmez |