Mantıksal AND (&&)
- React kursu
- Başlangıç
- Ders 24/84
- 4 dk
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.
Başlangıç kodu
// ErrorBox bileşenini buraya yazÖrnek çözüm
function ErrorBox({ hasError }) {
return hasError === true && <p className="error">Hata oluştu</p>;
}
export default ErrorBox;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 && 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 Doğru cevap
- DOM güncellemek için
Açıklama: && tek taraflı koşullu render için idealdir.
2 && operatörü
&& deseni: ____ koşul && öğe.&& deseni: koşul koşul && öğe.Açıklama: koşul && öğe desenidir.
3 && desenini eşleştir
| Kavram | Anlamı |
|---|---|
koşul |
Soru |
&& |
Operatör |
öğe |
Sonuç |
0 |
Risk |