&& ile Gösterme

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

Sıklıkla bir else durumu yoktur: yalnızca bir koşul sağlandığında bir şeyin görünmesini istersiniz. && hilesi "göster ya da hiçbir şey yapma" durumunu yönetir:

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

Nasıl çalışır: &&, sol taraf true olduğunda sağ tarafı döndürür ve React bunu render eder. Sol taraf false olduğunda ise hiçbir şey render edilmez. Bu, : null kısmı kesilmiş ternary ifadesidir:

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

Görev

Kolay

Yalnızca okunacak bir şey olduğunda bir gelen kutusu rozeti gösterin. Bileşen unread değişkenini tanımlar.

&& kullanarak, id="badge" ve 3 new messages metnine sahip bir <span> oluşturun (sayıyı değişkenden oluşturun!), ancak yalnızca unread 0'dan büyük olduğunda.

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>