Koşullu render

&& 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.

Örnek çözümü göster

const isLoggedIn = true;

function App() {
  return (
    <View>
      {isLoggedIn ? <Text>Hosgeldin</Text> : <Text>Giriş yap</Text>}
    </View>
  );
}

Kendini test et

&& operatörü

{____ && <Text>Hosgeldin</Text>}

Cevabı göster

{isLoggedIn && <Text>Hosgeldin</Text>}

Koşullu render sembolleri

&&

Ve operatörü
?

Ternary soru
:

Ternary iki nokta
{ }

İfade gömme
Ternary ile hangi yazım doğrudur?
- {isLoggedIn ? <Text>Evet</Text>}
- {isLoggedIn ? <Text>Evet</Text> : <Text>Hayır</Text>}
- {if (isLoggedIn) <Text>Evet</Text>}
- {isLoggedIn <Text>Evet</Text>}
Cevabı göster

{isLoggedIn ? <Text>Evet</Text> : <Text>Hayır</Text>} — Ternary ? ve : ile iki değer verir.

Sıradaki ders: Özet - JSX

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler