Renderowanie warunkowe w React: if, ternary, && i null

Renderowanie warunkowe w React oznacza wybieranie tego, co zwraca komponent, zwykłym JavaScriptem: instrukcją if przed return, operatorem warunkowym cond ? a : b wewnątrz JSX albo cond && <Thing />, żeby pokazać coś albo nic. Nie ma specjalnej składni szablonów do nauczenia.

import { useState } from 'react';

export default function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return (
        <div>
            <p>{isLoggedIn ? 'Welcome back, Ada.' : 'Please log in.'}</p>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Log out' : 'Log in'}
            </button>
        </div>
    );
}

Kliknij przycisk, a przełączą się zarówno komunikat, jak i etykieta, bo każdy operator warunkowy wybiera inny tekst przy następnym renderowaniu. Zmień useState(false) na useState(true), a podgląd wystartuje jako zalogowany.

Instrukcje if i wczesne returny

Nawiasy klamrowe JSX przyjmują wyrażenia, a nie instrukcje, więc nie możesz napisać {if (x) ...} w znacznikach. Przed return możesz napisać dowolny if. Gdy cały stan komponentu wygląda inaczej (ładowanie, błąd, brak danych), zrób wczesny return dla każdego przypadku, a główne znaczniki zostaw dla normalnego.

import { useState } from 'react';

function Inbox({ status, messages }) {
    if (status === 'loading') {
        return <p>Loading messages...</p>;
    }
    if (status === 'error') {
        return <p style={{ color: 'crimson' }}>Could not load your inbox.</p>;
    }
    if (messages.length === 0) {
        return <p>No messages yet.</p>;
    }
    return (
        <ul>
            {messages.map((m) => (
                <li key={m}>{m}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [status, setStatus] = useState('loading');
    const [messages, setMessages] = useState([]);

    return (
        <div>
            <button onClick={() => setStatus('loading')}>Loading</button>{' '}
            <button onClick={() => setStatus('error')}>Error</button>{' '}
            <button onClick={() => { setStatus('done'); setMessages([]); }}>Empty</button>{' '}
            <button onClick={() => { setStatus('done'); setMessages(['Hi', 'Lunch?']); }}>
                Loaded
            </button>
            <Inbox status={status} messages={messages} />
        </div>
    );
}

Każdy przycisk wprowadza skrzynkę w inny stan, a każdy stan ma własną krótką, czytelną gałąź. Wczesne returny trzymają główną ścieżkę na dole, bez zagnieżdżeń.

Operatory warunkowe wewnątrz JSX

Gdy zmienia się tylko mała część znaczników, operator warunkowy w linii trzyma ją w jednym miejscu: {isOpen ? <CloseIcon /> : <MenuIcon />}. Operatory warunkowe dobrze sprawdzają się przy dwóch opcjach. Zagnieżdżone operatory dla trzech lub więcej szybko stają się trudne do czytania:

// Hard to follow
{status === 'loading' ? <Spinner /> : status === 'error' ? <ErrorBox /> : <List />}

Gdy to widzisz, przenieś logikę do łańcucha if przed return (jak powyżej) albo do mapy obiektów (niżej).

&& i zabłąkane 0

cond && <Thing /> renderuje <Thing />, gdy cond jest prawdziwe (truthy), i nic, gdy jest false. Działa to, bo && zwraca swoją lewą stronę, gdy jest ona fałszywa (falsy), a React nie renderuje niczego dla false, null i undefined.

Pułapka polega na tym, że 0 też jest fałszywe, a React renderuje liczby. Więc count && <Badge /> przy liczniku 0 umieszcza na stronie dosłowne 0.

import { useState } from 'react';

export default function App() {
    const [unread, setUnread] = useState(0);

    return (
        <div>
            <p>
                Broken: {unread && <b>{unread} unread</b>}
            </p>
            <p>
                Fixed: {unread > 0 && <b>{unread} unread</b>}
            </p>
            <button onClick={() => setUnread(unread + 1)}>New message</button>{' '}
            <button onClick={() => setUnread(0)}>Mark all read</button>
        </div>
    );
}

Bez nieprzeczytanych wiadomości pierwsza linia pokazuje "Broken: 0", a druga nie pokazuje niczego po "Fixed:". Kliknij New message, a obie się zgodzą; kliknij Mark all read, a 0 wróci. Rozwiązanie to dać && prawdziwą wartość logiczną: unread > 0, items.length > 0 albo Boolean(unread). Pusty tekst '' ma w teorii ten sam problem, ale nie renderuje niczego widocznego, więc rzadko go zauważasz.

Zwracanie null

Komponent może zwrócić null, żeby nie renderować niczego. Dobrym przykładem jest baner ostrzeżenia, który pojawia się tylko wtedy, gdy jest przed czym ostrzegać: rodzic zawsze renderuje <Warning />, a decyzję podejmuje komponent.

import { useState } from 'react';

function Warning({ message }) {
    console.log('Warning rendered, message =', message);
    if (!message) {
        return null;
    }
    return (
        <p style={{ background: '#fff4d6', padding: 8, borderRadius: 6 }}>{message}</p>
    );
}

export default function App() {
    const [message, setMessage] = useState('');

    return (
        <div>
            <Warning message={message} />
            <button onClick={() => setMessage('Your trial ends tomorrow.')}>Warn</button>{' '}
            <button onClick={() => setMessage('')}>Dismiss</button>
        </div>
    );
}

Obserwuj konsolę: funkcja Warning wypisuje log przy każdym renderowaniu, także wtedy, gdy zwraca null. Zwrócenie null pomija wynik, a nie pracę. Jego hooki i efekty nadal się wykonują, więc jeśli komponent jest kosztowny albo coś uruchamia (timer, subskrypcję), zdecyduj w rodzicu i w ogóle go nie renderuj.

Przechowywanie JSX w zmiennej

JSX to wartość, więc możesz przypisać go do zmiennej, zbudować go instrukcjami if i później wstawić do znaczników. Pomaga to, gdy jedna część większego układu zależy od kilku warunków.

function Checkout({ cart, user }) {
    let action;
    if (!user) {
        action = <a href="/login">Log in to check out</a>;
    } else if (cart.length === 0) {
        action = <p>Your cart is empty.</p>;
    } else {
        action = <button>Pay now</button>;
    }

    return (
        <section>
            <h2>Your cart</h2>
            {action}
        </section>
    );
}

Wybór jednego z kilku komponentów przez obiekt

Gdy wybór to „jeden z wielu", obiekt przypisujący każdej wartości komponent jest krótszy niż długi łańcuch if albo switch, a dodanie przypadku to jedna linia.

import { useState } from 'react';

function Profile() {
    return <p>Name: Ada Lovelace</p>;
}
function Billing() {
    return <p>Plan: Pro, renews on 1 May</p>;
}
function Security() {
    return <p>Two-factor login is on.</p>;
}

const TABS = { profile: Profile, billing: Billing, security: Security };

export default function App() {
    const [tab, setTab] = useState('profile');
    const Panel = TABS[tab];

    return (
        <div>
            {Object.keys(TABS).map((name) => (
                <button
                    key={name}
                    onClick={() => setTab(name)}
                    style={{ fontWeight: tab === name ? 700 : 400, marginInlineEnd: 6 }}
                >
                    {name}
                </button>
            ))}
            <Panel />
        </div>
    );
}

TABS[tab] wybiera komponent, a <Panel /> go renderuje. Zmienna musi zaczynać się wielką literą: JSX traktuje <panel /> jako tag HTML. Dodaj do TABS wpis notifications z własnym komponentem, a pojawi się czwarty przycisk.

Ukrycie to nie to samo co niewyrenderowanie

Są dwa sposoby, żeby coś zniknęło, i zachowują się inaczej. show && <Counter /> usuwa komponent z drzewa, gdy show jest fałszywe. React go odmontowuje i wyrzuca jego stan, więc po powrocie zaczyna od zera. Ukrycie go przez CSS (style={{ display: show ? 'block' : 'none' }}) zostawia go zamontowanego, więc jego stan przetrwa.

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);
    return (
        <p>
            {label}: <button onClick={() => setCount(count + 1)}>{count}</button>
        </p>
    );
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            <label>
                <input type="checkbox" checked={show} onChange={(e) => setShow(e.target.checked)} />
                Show counters
            </label>
            {show && <Counter label="Removed with &&" />}
            <div style={{ display: show ? 'block' : 'none' }}>
                <Counter label="Hidden with CSS" />
            </div>
        </div>
    );
}

Kliknij kilka razy oba liczniki, odznacz pole, a potem zaznacz je ponownie. Pierwszy licznik wrócił do 0, a drugi wciąż trzyma swoją liczbę. Żadne z tych zachowań nie jest błędne: usuwanie jest właściwe dla formularza, który za każdym razem ma startować pusty, ukrywanie dla kart, których pozycja przewinięcia albo treść pól ma zostać zachowana. Strona o renderowaniu wyjaśnia, jak React decyduje, że komponent jest tym samym komponentem między renderowaniami.

React 19.2 dodaje trzecią opcję, <Activity mode="hidden">, która ukrywa swoje dzieci i zachowuje ich stan jak CSS, a do tego sprząta ich efekty, dopóki nie zostaną znów pokazane.

Warunkowe propsy i atrybuty

Warunki nie dotyczą tylko tego, które elementy się pojawiają. Każdy prop może przyjąć wyliczoną wartość, więc operator warunkowy albo porównanie wewnątrz atrybutu to często wszystko, czego potrzebujesz:

<button disabled={!canSave} className={hasError ? 'field error' : 'field'}>
    Save
</button>
<input aria-invalid={hasError} placeholder={user ? user.email : 'you@example.com'} />

Gdy wartość propsa to undefined, React całkowicie pomija atrybut, co jest czystym sposobem na dodawanie atrybutu tylko czasami: title={isTruncated ? fullText : undefined}. Dla atrybutów logicznych, takich jak disabled i checked, przekaż true albo false, a React je doda albo usunie.

Warunki w listach

Żeby pominąć elementy listy, przefiltruj tablicę przed mapowaniem, zamiast zwracać null wewnątrz map. items.filter((i) => i.done).map(...) czyta się dokładnie tak, jak działa, a strona o listach i kluczach pokazuje to w działającym przykładzie.