Reageer voorwaardelike lewering
In React kan u komponente voorwaardelik weergee.
Daar is verskeie maniere om dit te doen.
if
Verklaring
Ons kan die if
JavaScript-operateur gebruik om te besluit watter komponent om weer te gee.
Voorbeeld:
Ons sal hierdie twee komponente gebruik:
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Voorbeeld:
Nou sal ons 'n ander komponent skep wat kies watter komponent om te lewer gebaseer op 'n voorwaarde:
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Probeer om die isGoal
kenmerk te verander na true
:
Voorbeeld:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Word gesertifiseer!
$ 95 INSKRYF
Logiese &&
operateur
Nog 'n manier om 'n React-komponent voorwaardelik weer te gee, is deur die &&
operateur te gebruik.
Voorbeeld:
Ons kan JavaScript-uitdrukkings in JSX insluit deur krulhakies te gebruik:
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')
);
As cars.length
is gelykstaande aan waar, &&
sal die uitdrukking na weergegee word.
Probeer om die cars
skikking leeg te maak:
Voorbeeld:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Ternêre operateur
Nog 'n manier om elemente voorwaardelik weer te gee, is deur 'n ternêre operateur te gebruik.
condition ? true : false
Ons sal teruggaan na die doelvoorbeeld.
Voorbeeld:
Stuur die MadeGoal
komponent terug as
isGoal
dit is true
, anders stuur die MissedGoal
komponent terug:
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Om meer te wete te kom, sien die ternêre operateur- afdeling.