Ternary operatör

Koşul ? doğru : yanlış ile kısa koşullu render yazmayı öğrenirsin.

Ternary operatör

Ternary operatör koşul ? doğruDeğer : yanlışDeğer biçimindedir. JSX içinde süslü parantezle kullanılır: { 'count > 0 ? <Full /> : <Empty />' }.

Ternary iki seçenek arasında seçim yapmanın en kısa yoludur. İç içe yazılabilir ama okunurluk için iç içe kullanımı sınırlandırmak iyi bir uygulamadır.

İfade döndürdüğü için süslü parantez içinde doğrudan kullanılabilir; if deyimi gibi ek satır gerektirmez.

Ternary ve if farkı

Ternary bir ifadedir: bir değer döndürür ve süslü parantez içinde kullanılabilir. if ise bir deyimdir: değer döndürmez ve süslü parantez içinde kullanılamaz.

Bu yüzden JSX içinde koşullu render için ternary tercih edilir. if ancak bileşenin gövdesinde, return dışında kullanılabilir.

İç içe iki koşul gerekiyorsa, ternary yerine yardımcı değişken veya erken return daha okunaklı olabilir.

Uygulama Stok durumuna göre etiket

Aşağıdaki iskeleti tamamla. StockLabel adında bir bileşen yaz; ({ '{ count }' }) parametresi alsın. count 0'dan büyükse <p>Stokta</p>, değilse <p>Tükendi</p> döndürsün (ternary ile). Dışa aktarmayı unutma.

Örnek çözümü göster

function StockLabel({ count }) {
  return count > 0 ? <p>Stokta</p> : <p>Tükendi</p>;
}

export default StockLabel;

Kendini test et

Ternary operatör kaç değer döndürür?
- Bir
- İki
- Üç
- Sıfır
Cevabı göster

İki — Ternary iki değerden birini döndürür.

Ternary yazımı

Ternary ____ işaretiyle başlar.

Cevabı göster

Ternary ? işaretiyle başlar.

Ternary parçalarını eşleştir

koşul

Soru öncesi
?

Soru işareti
doğruDeğer

İlk değer
yanlışDeğer

İkinci değer

Sıradaki ders: Mantıksal AND (&&)

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler