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!