Mantıksal AND (&&)

Koşul && öğe desenini ve dikkat noktalarını öğrenirsin.

Mantıksal AND (&&)

Mantıksal AND deseni { 'koşul && öğe' } şeklindedir. Koşul doğruysa öğe çizilir, yanlışsa hiçbir şey olmaz. Bu, koşul sağlanınca göster denilen tek taraflı durumlar için idealdir.

Örnek: { 'hasError && <Error /> '}. hasError true ise Error gösterilir, değilse hiçbir şey.

Dikkat: koşul 0 gibi sahte (falsy) bir değer döndürürse, React 0'ı ekrana yazabilir. Bu yüzden koşulun mutlaka boolean olduğundan emin ol: { 'hasError === true && <Error />' } daha güvenlidir.

&& dikkat noktası

{ 'count && <List />' } yazdığında, eğer count 0 ise React ekrana 0 yazdırabilir. Bu, 0'ın sayısal bir değer olarak render edilmesinden kaynaklanır.

Bunu önlemek için iki yaygın yöntem var: koşulu boolean'a çevirmek (count > 0) veya !!count ile açık boolean yapmak.

Ternary de işe yarar: { 'count > 0 ? <List /> : null' }. Bu yazım 0 sorununu tamamen ortadan kaldırır.

Uygulama Hata mesajı göster

Aşağıdaki iskeleti tamamla. ErrorBox adında bir bileşen yaz; ({ '{ hasError }' }) parametresi alsın. hasError === true ise <p className="error">Hata oluştu</p> döndürsün, değilse null (&& ile). Dışa aktarmayı unutma.

Örnek çözümü göster

function ErrorBox({ hasError }) {
  return hasError === true && <p className="error">Hata oluştu</p>;
}

export default ErrorBox;

Kendini test et

&& deseni ne zaman kullanılır?
- State saklamak için
- İki seçenek arasında seçim için
- Yalnızca bir koşul sağlanınca göstermek için
- DOM güncellemek için
Cevabı göster

Yalnızca bir koşul sağlanınca göstermek için — && tek taraflı koşullu render için idealdir.

&& operatörü

&& deseni: ____ koşul && öğe.

Cevabı göster

&& deseni: koşul koşul && öğe.

&& desenini eşleştir

koşul

Soru
&&

Operatör
öğe

Sonuç
0

Risk

Sıradaki ders: Erken return

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler