Listy, klucze i renderowanie warunkowe
Proszę renderować tablice elementów za pomocą .map(), dostarczać stabilne propsy key oraz warunkowo renderować elementy za pomocą && i operatora trójargumentowego.
Listy, klucze i renderowanie warunkowe to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Renderowanie list za pomocą .map()
Dynamiczną listę renderuje się, wywołując .map() na tablicy i zwracając JSX dla każdego elementu. React renderuje tablicę elementów tak samo jak pojedynczy element.
const fruits = ['apple', 'banana', 'cherry'];
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);Prop key — dlaczego ma znaczenie
key to specjalny prop React, który pomaga mu rozpoznać, które elementy listy się zmieniły, zostały dodane lub usunięte. Bez kluczy albo z niestabilnymi kluczami, takimi jak indeksy, React może wykonywać nieprawidłowe aktualizacje.
Dobre i złe klucze
Dobre klucze: unikatowe, stabilne identyfikatory pochodzące z danych, na przykład item.id. Złe klucze: indeksy tablicy, ponieważ elementy mogą zmieniać kolejność, lub losowe wartości, które zmieniają się przy każdym renderowaniu.
// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}
// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}Renderowanie obiektów
Należy mapować tablicę obiektów na komponenty, poddając obiekt destrukturyzacji w celu przekazania propsów.
interface Todo { id: number; text: string; done: boolean; }
const todos: Todo[] = [...];
return (
<ul>
{todos.map(({ id, text, done }) => (
<TodoItem key={id} text={text} done={done} />
))}
</ul>
);Renderowanie warunkowe za pomocą &&
Użyj operatora krótkiego spięcia &&, aby warunkowo dołączyć JSX. Jeśli lewa strona jest falsy, nic nie zostanie wyrenderowane. Należy uważać na wartości liczbowe falsy — 0 jest renderowane jako '0'.
function Status({ count }: { count: number }) {
return (
<div>
{count > 0 && <Badge count={count} />}
{/* Safer: */}
{count > 0 ? <Badge count={count} /> : null}
</div>
);
}Renderowanie warunkowe za pomocą operatora ternarnego
Użyj operatora ternarnego, aby na podstawie warunku renderować jeden z dwóch elementów.
function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
return isLoggedIn
? <button onClick={logout}>Sign Out</button>
: <button onClick={login}>Sign In</button>;
}Renderowanie warunkowe za pomocą instrukcji if
W przypadku złożonych warunków należy użyć instrukcji if przed return. Dla stanów ładowania i błędu należy stosować wcześniejszy return.
function UserProfile({ user }: { user: User | null }) {
if (!user) return <p>Loading...</p>;
if (user.banned) return <p>Account suspended.</p>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}Filtrowanie przed mapowaniem
Należy przefiltrować tablicę przed mapowaniem, aby renderować tylko pasujące elementy. Takie rozwiązanie jest przejrzyste i czytelne.
const activeUsers = users.filter(u => u.active);
return (
<ul>
{activeUsers.map(user => (
<UserItem key={user.id} {...user} />
))}
</ul>
);Stan pusty
Zawsze należy obsłużyć przypadek pustej tablicy. Ciche renderowanie pustej listy jest mylące — zamiast tego należy wyświetlić pomocny komunikat o braku elementów.
return (
<div>
{todos.length === 0
? <p className="empty-state">No tasks yet. Add one above!</p>
: <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
}
</div>
);Renderowanie list za pomocą portali
Długie listy, które muszą pojawić się w innym węźle DOM, na przykład w rozwijanym menu, mogą korzystać z ReactDOM.createPortal. Jednak większość list renderuje się bezpośrednio w drzewie komponentów.
Wirtualizacja list na potrzeby wydajności
W przypadku bardzo długich list (1000 lub więcej elementów) należy użyć biblioteki do wirtualizacji, takiej jak react-window lub @tanstack/react-virtual. Renderują one tylko widoczne wiersze, unikając problemów z wydajnością DOM.
Szybkie sprawdzenie
Kiedy użycie indeksu tablicy jako key na listach React jest dopuszczalne?
Podsumowanie: listy i renderowanie warunkowe
Renderuj listy za pomocą .map(). Zawsze dodawaj stabilne, unikalne właściwości key. Używaj && dla elementów opcjonalnych (uważaj na 0). Używaj operatora trójargumentowego, gdy możliwe są dwie opcje. Stosuj wcześniejsze zwroty dla stanów ładowania i błędu. Filtruj elementy przed użyciem mapowania na listach renderowanych warunkowo. Wyświetlaj komunikat o pustym stanie dla pustych tablic. Wirtualizuj bardzo długie listy.
Często zadawane pytania
Czy lekcja „Listy, klucze i renderowanie warunkowe” jest bezpłatna?
Tak — pełny tekst „Listy, klucze i renderowanie warunkowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Listy, klucze i renderowanie warunkowe”?
Proszę renderować tablice elementów za pomocą .map(), dostarczać stabilne propsy key oraz warunkowo renderować elementy za pomocą && i operatora trójargumentowego. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Listy, klucze i renderowanie warunkowe”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- JSX: składnia i transpilacja
- Komponenty funkcyjne i props
- Hook useState: stan i ponowne renderowanie
- Listy, klucze i renderowanie warunkowe