Koşullu render
- React Native kursu
- Başlangıç
- Ders 11/116
- 5 dk
&& ve ternary ile koşullu render öğrenirsin.
Koşullu render
Bazen bir bileşeni yalnızca belirli bir koşulda göstermek istersin. Buna koşullu render denir. JSX'te bunun için iki yaygın yöntem vardır.
Birincisi && operatörü: {isLoggedIn && <Text>Hosgeldin</Text>}. Koşul doğruysa sağ taraf görünür, yanlışsa hiçbir şey gösterilmez.
İkincisi ternary operatörü: {isLoggedIn ? <Text>Evet</Text> : <Text>Hayır</Text>}. Koşul doğruysa ilk taraf, yanlışsa ikinci taraf görünür.
Ternary operatör
Ternary operatörü üç parçadan oluşur: koşul ? doğruDeğer : yanlışDeğer. Koşul doğruysa ilk değer, yanlışsa ikinci değer döner.
JSX içinde süslü parantezle kullanılır: {count > 0 ? <Text>Dolu</Text> : <Text>Bos</Text>}. Bu sayede tek satırda iki farklı çıktı gösterilir.
Ternary, if-else'in tek satırlık karşılığıdır. Süslü parantez içinde if kullanılamadığı için ternary tercih edilir.
Uygulama Ternary ile render
isLoggedIn adında bir değişken tanımla (const isLoggedIn = true;). App bileşeni <View> içinde ternary ile koşullu render yapsın: doğruysa <Text>Hosgeldin</Text>, yanlışsa <Text>Giriş yap</Text> göstersin.
Başlangıç kodu
// isLoggedIn tanımla
// App bileşenini ternary ile yaz
function App() {
return null;
}Örnek çözüm
const isLoggedIn = true;
function App() {
return (
<View>
{isLoggedIn ? <Text>Hosgeldin</Text> : <Text>Giriş yap</Text>}
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 && operatörü
{____ && <Text>Hosgeldin</Text>}{isLoggedIn && <Text>Hosgeldin</Text>}Açıklama: isLoggedIn doğruysa Text görünür.
2 Koşullu render sembolleri
| Kavram | Anlamı |
|---|---|
&& |
Ve operatörü |
? |
Ternary soru |
: |
Ternary iki nokta |
{ } |
İfade gömme |
3 Ternary ile hangi yazım doğrudur?
- {isLoggedIn ? <Text>Evet</Text>}
- {isLoggedIn ? <Text>Evet</Text> : <Text>Hayır</Text>} Doğru cevap
- {if (isLoggedIn) <Text>Evet</Text>}
- {isLoggedIn <Text>Evet</Text>}
Açıklama: Ternary ? ve : ile iki değer verir.