Rumah > hujung hadapan web > tutorial js > Rendering Bersyarat dalam React

Rendering Bersyarat dalam React

Mary-Kate Olsen
Lepaskan: 2024-09-28 18:21:02
asal
286 orang telah melayarinya

Conditional Rendering in 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.

1

2

3

4

5

6

7

function MyComponent({ isLoggedIn }) {

    if (isLoggedIn) {

        return <h1>Welcome back!</h1>;

    } else {

        return <h1>Please sign in.</h1>;

    }

}

Salin selepas log masuk

2. Menggunakan Operator Ternary

Ini ialah cara ringkas untuk memaparkan kandungan berdasarkan syarat.

1

2

3

4

5

6

7

function MyComponent({ isLoggedIn }) {

    return (

        <h1>

            {isLoggedIn ? 'Welcome back!' : 'Please sign in.'}

        </h1>

    );

}

Salin selepas log masuk

3. Menggunakan Operator Logik &&

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

1

2

3

4

5

6

7

8

function MyComponent({ isLoggedIn }) {

    return (

        <div>

            {isLoggedIn && <h1>Welcome back!</h1>}

            {!isLoggedIn && <h1>Please sign in.</h1>}

        </div>

    );

}

Salin selepas log masuk

4. Pernyataan Tukar

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

1

2

3

4

5

6

7

8

9

10

11

12

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;

    }

}

Salin selepas log masuk

Contoh

Berikut ialah contoh penuh menggunakan komponen berfungsi:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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;

Salin selepas log masuk

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!

sumber:dev.to
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