Reageer voorwaardelijke weergave
In React kun je componenten voorwaardelijk renderen.
Er zijn verschillende manieren om dit te doen.
ifStelling
We kunnen de ifJavaScript-operator gebruiken om te beslissen welke component moet worden weergegeven.
Voorbeeld:
We gebruiken deze twee componenten:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Voorbeeld:
Nu gaan we een ander onderdeel maken dat kiest welk onderdeel wordt weergegeven op basis van een voorwaarde:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Probeer het isGoalkenmerk te wijzigen in true:
Voorbeeld:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Gecertificeerd!
$95 INSCHRIJVEN
Logische &&operator
Een andere manier om een React-component voorwaardelijk weer te geven, is door de &&operator te gebruiken.
Voorbeeld:
We kunnen JavaScript-expressies insluiten in JSX door accolades te gebruiken:
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')
);
Als cars.length is gelijk is aan waar, wordt de uitdrukking na &&weergegeven.
Probeer de carsarray leeg te maken:
Voorbeeld:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
ternaire operator
Een andere manier om elementen voorwaardelijk weer te geven, is door een ternaire operator te gebruiken.
condition ? true : false
We gaan terug naar het voorbeeld van het doel.
Voorbeeld:
Retourneer de MadeGoalcomponent als
isGoalis true, retourneer anders de MissedGoalcomponent:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Zie het gedeelte over de ternaire operator voor meer informatie .