Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Melaksanakan Rendering Bersyarat dalam ReactJS Tanpa Menggunakan Pernyataan if-else?

Bagaimana untuk Melaksanakan Rendering Bersyarat dalam ReactJS Tanpa Menggunakan Pernyataan if-else?

Susan Sarandon
Lepaskan: 2024-12-09 16:32:10
asal
307 orang telah melayarinya

How to Implement Conditional Rendering in ReactJS Without Using if-else Statements?

Rendering Bersyarat dalam ReactJS: Penyata if-else dalam JSX

Dalam ReactJS, pernyataan if-else tidak boleh digunakan secara langsung dalam ungkapan JSX . Ini disebabkan oleh sifat JSX, yang merupakan gula sintaksis untuk mencipta panggilan dan objek fungsi JavaScript.

Untuk memaparkan elemen secara bersyarat berdasarkan keadaan, terdapat pendekatan alternatif:

Operator Ternary:

Gunakan operator ternary untuk menilai keadaan dan menjadikan elemen berbeza berdasarkan hasil, seperti yang ditunjukkan di bawah:

render() {
    return (   
        <View>
Salin selepas log masuk

Invokasi Fungsi:

Buat fungsi yang menilai logik if-else dan mengembalikan elemen yang sesuai. Kemudian, panggil fungsi dari dalam ungkapan JSX:

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

render() {
    return (   
        <View>
Salin selepas log masuk

Dengan menggunakan sama ada pengendali ternary atau seruan fungsi, anda boleh memberikan unsur-unsur dalam ReactJS secara bersyarat tanpa mengubah suai pemandangan atau menggunakan tab.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Rendering Bersyarat dalam ReactJS Tanpa Menggunakan Pernyataan if-else?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan