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

Rendering Bersyarat dengan Pernyataan if-else dalam ReactJS

Rendering bersyarat memainkan peranan penting dalam ReactJS apabila anda perlu memaparkan kandungan berbeza secara dinamik berdasarkan syarat tertentu. Walau bagaimanapun, tidak seperti bahasa pengaturcaraan standard, anda tidak boleh menggunakan pernyataan if-else secara langsung dalam JSX.

Sintaks JSX

Menurut dokumentasi React, pernyataan if-else tidak disokong dalam JSX kerana ia adalah gula sintaksis untuk panggilan fungsi dan pembinaan objek. Ini bermakna ungkapan JSX diterjemahkan ke dalam panggilan fungsi JavaScript dan menilai kepada objek JavaScript.

Alternatif Paparan Bersyarat

Untuk memaparkan elemen secara bersyarat, terdapat dua pilihan utama:

1. Pengusaha Ternary:

   Ternary operator membenarkan anda membuat elemen secara bersyarat menggunakan sintaks berikut:

   {condition ? <Element1 /> : <Element2 />}

   Salin selepas log masuk

   Contohnya:

   render() {
       return (
           <View>

   Salin selepas log masuk

2. Panggilan Fungsi dengan Logik Bersyarat:

   Anda boleh menentukan fungsi berasingan yang mengandungi logik bersyarat dan memanggilnya dari dalam JSX:

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

   Salin selepas log masuk

Ringkasan

Dengan memahami alternatif ini, anda boleh menghasilkan kandungan secara bersyarat dengan berkesan dalam ReactJS walaupun kenyataan if-else tidak boleh digunakan terus dalam JSX.

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