Render bersyarat di React (jsx)

Pada dasarnya kondisi harus bernilai benar atau salah. Ini berbeda dari cara kerja conditional di js. Inilah yang saya maksud:

data.length > 0 && <div />

data.length && <div />

Dalam kasus pertama, jika ukuran array adalah 0, 0 > 0akan mengevaluasi untuk falsejadi false && [anything really]mengevaluasi ke false, sehingga komponen tidak akan diberikan.

Namun, dalam yang kedua, jika ukurannya 0, 0 && <div />dievaluasi menjadi 0<div />. Dengan kata lain, baik 0 dan elemen akan dirender. Berasal dari js, saya berharap &&operator memaksa 0 di sisi kiri menjadi boolean (salah) tetapi itu tidak terjadi, jadi keduanya dirender - begitukah cara kerja jsx?

Anda akan mengharapkan pernyataan 0 && <div />untuk mengevaluasi ke false. Itu sebenarnya akan terjadi di luar jsx.

const value = data.length ? 1 : 0;

Bagaimana dengan pernyataan di bawah ini, menurut Anda bagaimana hasilnya?

data.length ? <div />: <err />;

Jadi tebak itu bermuara pada bagaimana operator binary (&&)and ternary (? :)menangani kondisi di jsx — satu memaksa (ternary) dan yang lainnya tidak (biner).

Bagaimana jika kita beralih di sekitar operan dari operator biner

<div /> && data.length > 0

Saya tahu orang-orang yang menjauhi operator biner di jsx sama sekali karena sifatnya yang tidak deterministik. Mereka menggunakan terner dan menyediakan nullsebagai operan ketika mereka tidak menginginkan apa pun yang dirender untuk evaluasi tertentu.

Saya juga menemukan aturan di atas berfungsi sama untuk dynamic classNames.

Katakanlah Anda memiliki komponen yang menunjukkan langkah saat ini dalam suatu proses, dan Anda ingin memberikan warna/perilaku yang berbeda — memperluas gaya untuk semua komponen langkah.

<div className={`step ${current ? 'current' : ''}`} />

Bagaimana dengan menggunakan nulloperan untuk evaluasi palsu?

<div className={`step ${current ? 'current' : null}`} />

Bagaimana kalau menjadi biner? Nah, mari kita lihat…

<div className={`step ${current && 'current'}`} />

Favorit saya masih string kosong ''untuk evaluasi palsu. Beri tahu saya teknik yang Anda terapkan .

Jika cara Anda mendesain komponen, Anda tidak akan mewarisi gaya apa pun, seperti yang saya lakukan di atas (di mana semua komponen saat ini dan tidak saat ini memiliki kelas induk step) — dan mungkin bersedia menduplikasi beberapa aturan ( apa kerusakannya) maka masalahnya bisa menjadi lebih mudah:

<div className={current ? 'current' : 'not-current'} />

Tetap saja, favorit saya adalah ''.