Paparan Bersyarat (Conditional Rendering)

15 minitPemulaReact

Dalam pelajaran ini

Return awal daripada component (termasuk return null) apabila tiada apa untuk dipaparkan
Pilih antara dua bahagian UI dengan operator ternary ? :
Guna && dengan selamat dan terangkan kenapa {count && …} boleh memaparkan 0

Idea utama

Component hanyalah function, jadi ia boleh tentukan apa yang hendak di-return. JavaScript biasa — if, ? : dan && — sudah cukup untuk paparkan perkara yang betul pada masa yang betul.

Aplikasi sebenar berubah mengikut situasi: butang Log in untuk tetamu, ucapan untuk ahli, lencana hanya apabila ada mesej baharu. React tiada sintaks if khas untuk ini — anda guna JavaScript biasa, kerana component anda memang JavaScript biasa.

1. `if` dengan early return

Apabila keseluruhan component patut kelihatan berbeza (atau hilang), semak syarat dahulu dan return awal. Return null bermaksud "jangan paparkan apa-apa di sini".

JSX

function OrderStatus({ order }) {
  if (!order) {
    return null; // nothing to show yet
  }
  if (order.ready) {
    return <p>Your kopi is ready!</p>;
  }
  return <p>Brewing… order #{order.number}</p>;
}

Component yang return null masih wujud (mounted) — state-nya disimpan dan hooks-nya masih berjalan. Ia cuma tidak meletakkan apa-apa pada skrin.

2. Ternary `? :` — ini ATAU itu

if ialah statement, jadi ia tidak boleh diletak di dalam kurungan kerinting JSX. Operator ternary ialah expression, jadi boleh: syarat ? jikaBenar : jikaPalsu. Gunakannya apabila anda sentiasa mahu paparkan salah satu daripada dua perkara.

JSX

<button onClick={toggle}>
  {loggedIn ? "Log out" : "Log in"}
</button>

{loggedIn ? <Dashboard /> : <LoginForm />}

3. `&&` — ini ATAU tiada apa-apa

a && b memulangkan a jika a falsy, jika tidak ia memulangkan b. React tidak memaparkan apa-apa untuk false, null, undefined dan true — jadi {isOpen && <Menu />} hanya paparkan menu apabila isOpen bernilai true.

Perangkap 0 &&

Nombor tidak diabaikan. Jika count ialah 0, maka {count && <Badge />} menghasilkan 0 — dan React akan memaparkan 0 yang tersesat pada halaman. Sentiasa beri && nilai true/false sebenar di sebelah kiri: count > 0 &&.

Papar 0 apabila kosong

JSX

{cart.length && <CartBadge count={cart.length} />}

Tiada apa dipapar apabila kosong

JSX

{cart.length > 0 && <CartBadge count={cart.length} />}

Yang mana patut saya guna?

return awal — seluruh component bergantung pada syarat (sedang dimuat, kosong, tiada kebenaran).
Ternary ? : — di dalam JSX, apabila anda mahu salah satu daripada dua perkara.
&& — di dalam JSX, apabila anda mahu sesuatu atau tiada apa-apa. Pastikan sebelah kiri ialah boolean sebenar.

Sekarang ucapan Welcome back, Aina! dipaparkan walaupun belum ada sesiapa log masuk, dan butang sentiasa tertulis Log in.

Guna state loggedIn supaya:

• perenggan .greeting dipaparkan hanya apabila sudah log masuk (paparkan petunjuk lain, atau tiada apa-apa, apabila belum log masuk);

• butang #login tertulis Log in apabila belum log masuk dan Log out apabila sudah log masuk.

Semakan

Tiada ucapan sebelum log masuk
Log masuk memaparkan ucapan dan butang Log out

Uji kefahaman

items ialah array kosong. Apa yang dipaparkan oleh {items.length && <List />}?

Tiada apa-apaNombor 0<List /> yang kosong

Apa yang berlaku apabila component return null?

React memaparkan ralatIa tidak memaparkan apa-apa, tetapi masih component yang sah dan mountedIa memaparkan teks "null"

Di dalam JSX anda mahu paparkan <Dashboard /> untuk ahli dan <LoginForm /> untuk tetamu. Apa yang paling sesuai?

{if (member) <Dashboard />}{member ? <Dashboard /> : <LoginForm />}{member && <Dashboard /> && <LoginForm />}

Apa yang anda pelajari

Component ialah function, jadi JavaScript biasa yang menentukan apa yang dipaparkan.
return awal (atau return null) untuk keputusan seluruh component; ? : untuk salah satu daripada dua; && untuk sesuatu-atau-tiada.
React mengabaikan false, null, undefined dan true, tetapi memaparkan nombor — jadi 0 && membocorkan 0. Guna count > 0 &&.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.