Bagaimanakah Saya Boleh Melaksanakan Rendering Bersyarat dalam React JSX Tanpa Menggunakan Penyata if-else?

Rendering Bersyarat dengan JSX dalam React: Memahami Penyata if-else

Dalam aplikasi React, logik rendering selalunya bergantung pada keadaan komponen . Walaupun nampaknya intuitif untuk menggunakan penyataan if-else dalam JSX untuk memberikan elemen secara bersyarat berdasarkan perubahan keadaan, pendekatan ini tidak berfungsi seperti yang diharapkan.

Mengapa Penyata if-else Tidak Berfungsi dalam JSX

JSX hanyalah gula sintaktik untuk mencipta objek JavaScript. Ia mengubah ungkapan JSX kepada panggilan fungsi dan pembinaan objek semasa penyusunan. Walau bagaimanapun, pernyataan if-else bukan ungkapan tetapi pernyataan.

Operator Ternary to the Rescue

Untuk menjadikan elemen secara bersyarat, anda boleh menggunakan operator ternary, ditulis sebagai:

{condition ? trueStatement : falseStatement}

Ia menyediakan cara ringkas untuk memilih secara dinamik antara elemen pemaparan berdasarkan syarat. Contohnya:

render() {
    return (   
        <View>

Dalam senario ini, jika nilai this.state.sama dengan 'berita', elemen Teks akan dipaparkan; jika tidak, null akan dikembalikan, dengan berkesan menyembunyikan elemen daripada paparan.

Pendekatan Berasaskan Fungsi

Pendekatan lain ialah mencipta fungsi yang mengendalikan pemaparan bersyarat. Letakkan logik if-else di dalam fungsi dan panggilnya dari dalam JSX:

renderElement(){
   if(this.state.value == 'news')
      return data;
   return null;
}

render() {
    return (   
        <View>

Kaedah ini menghapuskan keperluan untuk pernyataan if-else dalam JSX dan mengekalkan struktur kod yang lebih bersih.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Rendering Bersyarat dalam React JSX Tanpa Menggunakan Penyata if-else?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!