Reaguj na renderowanie warunkowe
W React możesz warunkowo renderować komponenty.
Można to zrobić na kilka sposobów.
if
Oświadczenie
Możemy użyć if
operatora JavaScript, aby zdecydować, który komponent ma zostać wyrenderowany.
Przykład:
Użyjemy tych dwóch komponentów:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Przykład:
Teraz utworzymy kolejny komponent, który wybierze komponent do renderowania na podstawie warunku:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Spróbuj zmienić isGoal
atrybut na true
:
Przykład:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Zostać certyfikowanym!
95 $ ZAPISZ
&&
Operator logiczny
Innym sposobem warunkowego renderowania komponentu React jest użycie &&
operatora.
Przykład:
Możemy osadzić wyrażenia JavaScript w JSX za pomocą nawiasów klamrowych:
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')
);
Jeśli cars.length
jest równa true, &&
wyrenderowane zostanie wyrażenie po.
Spróbuj opróżnić cars
tablicę:
Przykład:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Operator trójskładnikowy
Innym sposobem warunkowego renderowania elementów jest użycie operatora trójargumentowego.
condition ? true : false
Wrócimy do przykładu bramki.
Przykład:
Zwróć MadeGoal
składnik, jeśli
isGoal
jest true
, w przeciwnym razie zwróć MissedGoal
składnik:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Aby dowiedzieć się więcej, zobacz sekcję dotyczącą operatorów trójskładnikowych .