&& ile Gösterme

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası. Ders 34 / 42.

Çoğu zaman else yoktur: yalnızca bir koşul sağlandığında bir şeyin görünmesini istersin. && numarası, göster ya da hiçbir şey gösterme durumunu ele alır:

{unread > 0 && <span>You have {unread} new messages</span>}

Çalışma şekli: &&, sol taraf doğru olduğunda sağ tarafı döndürür ve React bunu ekrana işler. Sol taraf yanlış olduğunda hiçbir şey ekrana işlenmez. Sol tarafta bir boole değeri olduğunda bu, : null kısmı çıkarılmış üçlü koşul ifadesidir:

{cond ? <X /> : null}   // ile aynı
{cond && <X />}

Örneğin unread > 0 koşulunu kontrol etmesinin nedeni budur. {unread && <span>...</span>} ifadesinde unread değeri 0 olduğunda, && 0 değerini döndürür ve React bunu sayfada görüntüler.

Görev

Kolay

Gelen kutusunda yalnızca okunacak bir şey olduğunda bir rozet göster. Bileşen unread değerini tanımlar.

&& kullanarak, yalnızca unread değeri 0'dan büyük olduğunda id="badge" içeren ve 3 new messages metnini gösteren bir <span> oluştur (sayıyı değişkenden al!).

Kendin dene

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>