Rendering Bersyarat dalam React

Pemaparan bersyarat dalam React membolehkan anda memaparkan komponen atau elemen yang berbeza berdasarkan syarat tertentu, seperti keadaan atau prop. Berikut ialah beberapa kaedah biasa untuk mencapai pemaparan bersyarat:

1. Menggunakan Pernyataan If-Else

Anda boleh menggunakan penyataan if-else JavaScript standard dalam komponen anda.

function MyComponent({ isLoggedIn }) {
    if (isLoggedIn) {
        return <h1>Welcome back!</h1>;
    } else {
        return <h1>Please sign in.</h1>;
    }
}

2. Menggunakan Operator Ternary

Ini ialah cara ringkas untuk memaparkan kandungan berdasarkan syarat.

function MyComponent({ isLoggedIn }) {
    return (
        <h1>
            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}
        </h1>
    );
}

3. Menggunakan Operator Logik &&

Anda boleh menggunakan operator logik DAN untuk memaparkan komponen hanya jika syarat adalah benar.

function MyComponent({ isLoggedIn }) {
    return (
        <div>
            {isLoggedIn && <h1>Welcome back!</h1>}
            {!isLoggedIn && <h1>Please sign in.</h1>}
        </div>
    );
}

4. Pernyataan Tukar

Untuk keadaan yang lebih kompleks, anda boleh menggunakan pernyataan suis.

function MyComponent({ status }) {
    switch (status) {
        case 'loading':
            return <h1>Loading...</h1>;
        case 'success':
            return <h1>Data loaded successfully!</h1>;
        case 'error':
            return <h1>There was an error!</h1>;
        default:
            return null;
    }
}

Contoh

Berikut ialah contoh penuh menggunakan komponen berfungsi:

import React from 'react';

function App() {
    const [isLoggedIn, setIsLoggedIn] = React.useState(false);

    return (
        <div>
            <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            </button>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
        </div>
    );
}

export default App;

Ringkasan

Pilih kaedah yang paling sesuai dengan keperluan anda berdasarkan kerumitan keadaan anda dan gaya pengekodan peribadi anda. Beritahu saya jika anda memerlukan lebih banyak contoh atau penjelasan!

Atas ialah kandungan terperinci Rendering Bersyarat dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!