Podsumowanie: warunki i listy
Część sekcji Podstawy ścieżki React w Coddy. Lekcja 38 z 42.
Wyzwanie
ŚredniPodsumowanie rozdziału: zbuduj tablicę zadań na podstawie danych, wykorzystując wszystko z tego rozdziału.
- Komponent definiuje tablicę
tasks. Wewnątrz<ul id="done-list">wyrenderuj jeden element<li>dla każdego zadania, które jest ukończone: najpierwfilter, a potemmap. - Każdy element
<li>wyświetlatextzadania i używa jegoidjakokey. - Nad listą użyj
&&, aby wyrenderować<span>zid="badge"i tekstem2 done(zbuduj liczbę na podstawielengthprzefiltrowanej tablicy!), ale tylko wtedy, gdy co najmniej jedno zadanie jest ukończone.
Spróbuj swoich sił
<!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>Wszystkie lekcje w sekcji Podstawy
1Poznaj React
Czym jest React?Twój pierwszy komponentZasada jednego rodzicaJSX to nie HTMLPodsumowanie: poznaj React4Props
Czym są propsy?Przekazywanie propsówDwa propsyTen sam komponent, nowe daneProp childrenPodsumowanie: propsy7Warunki i listy
Renderowanie warunkowe operatorem trójargumentowymWyświetlanie za pomocą &&Renderowanie listyKlucze mają znaczenieFiltruj, a następnie mapujPodsumowanie: warunki i listy