Réagir le rendu conditionnel
Dans React, vous pouvez effectuer un rendu conditionnel des composants.
Il y a plusieurs moyens de le faire.
if Déclaration
Nous pouvons utiliser l' ifopérateur JavaScript pour décider quel composant rendre.
Exemple:
Nous utiliserons ces deux composants :
function MissedGoal() {
return <h1>MISSED!</h1>;
}
function MadeGoal() {
return <h1>Goal!</h1>;
}
Exemple:
Maintenant, nous allons créer un autre composant qui choisit le composant à afficher en fonction d'une condition :
function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Essayez de changer l' isGoalattribut entrue :
Exemple:
ReactDOM.render(
<Goal isGoal={true} />,
document.getElementById('root')
);
Obtenir une certification!
95 $ S'INSCRIRE
&&Opérateur logique
Une autre façon de rendre conditionnellement un composant React consiste à utiliser l' &&opérateur.
Exemple:
Nous pouvons intégrer des expressions JavaScript dans JSX en utilisant des accolades :
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')
);
Si cars.length est égal à vrai, l'expression après &&sera rendue.
Essayez de vider le carstableau :
Exemple:
const cars = [];
ReactDOM.render(
<Garage cars={cars} />,
document.getElementById('root')
);
Opérateur ternaire
Une autre façon de restituer des éléments de manière conditionnelle consiste à utiliser un opérateur ternaire.
condition ? true : false
Nous allons reprendre l'exemple du but.
Exemple:
Renvoie le MadeGoalcomposant si
isGoalest true, sinon renvoie le MissedGoalcomposant :
function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}
ReactDOM.render(
<Goal isGoal={false} />,
document.getElementById('root')
);
Pour en savoir plus, consultez la section sur l' opérateur ternaire .