Bagaimana untuk Melaksanakan Rendering Bersyarat dalam ReactJS JSX?

Menggunakan Penyata if-else dalam ReactJS JSX

Dalam ReactJS, pernyataan if-else tidak boleh digunakan terus dalam JSX. Ini kerana JSX bertukar kepada panggilan fungsi JavaScript, dan pernyataan if-else tidak serasi dengan sintaks ini.

Rendering Bersyarat dengan Operator Ternary

Satu pendekatan untuk rendering bersyarat ialah menggunakan operator ternary:

render() {
    return (
        <View>

Dalam contoh ini, jika nilai nilai harta keadaan sama dengan 'berita', elemen Teks dengan kandungan 'data' diberikan. Jika tidak, null diberikan, yang menyembunyikan elemen dengan berkesan.

Pemarahan Bersyarat Berasaskan Fungsi

Pilihan lain ialah mencipta fungsi untuk mengendalikan pemaparan bersyarat dan memanggilnya daripada JSX:

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

render() {
    return (
        <View>

Dalam kes ini, fungsi renderElement() menyemak keadaan nilai dan mengembalikan sama ada elemen Teks atau null. JSX kemudian memanggil fungsi renderElement() untuk memberikan elemen yang dikehendaki secara bersyarat.

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