Bereaksi Render Bersyarat
Di React, Anda dapat merender komponen secara kondisional.
Ada beberapa cara untuk melakukan ini.
ifPenyataan
Kita dapat menggunakan ifoperator JavaScript untuk memutuskan komponen mana yang akan dirender.
Contoh:
Kami akan menggunakan dua komponen ini:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Contoh:
Sekarang, kita akan membuat komponen lain yang memilih komponen mana yang akan dirender berdasarkan kondisi:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Coba ubah isGoalatributnya menjadi true:
Contoh:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Dapatkan Sertifikasi!
$95 DAFTAR
&&Operator Logika
Cara lain untuk merender komponen React secara kondisional adalah dengan menggunakan &&operator.
Contoh:
Kita dapat menyematkan ekspresi JavaScript di JSX dengan menggunakan kurung kurawal:
function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);
}
const cars = ['Ford', 'BMW', 'Audi'];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Jika cars.length sama dengan true, ekspresi setelahnya &&akan dirender.
Coba kosongkan carsarray:
Contoh:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Operator Terner
Cara lain untuk merender elemen secara kondisional adalah dengan menggunakan operator ternary.
condition ? true : false
Kita akan kembali ke contoh tujuan.
Contoh:
Kembalikan MadeGoalkomponen jika
, jika isGoaltidak truekembalikan MissedGoalkomponen:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Untuk mempelajari lebih lanjut, lihat bagian operator ternary .