Réagir aux accessoires
Les accessoires sont des arguments passés dans les composants React.
Les accessoires sont transmis aux composants via des attributs HTML.
props représente les propriétés.
Réagir aux accessoires
Les props React sont comme des arguments de fonction en JavaScript et des attributs en HTML.
Pour envoyer des accessoires dans un composant, utilisez la même syntaxe que les attributs HTML :
Exemple
Ajoutez un attribut "brand" à l'élément Car :
const myelement = <Car brand="Ford" />;Le composant reçoit l'argument en tant propsqu'objet :
Exemple
Utilisez l'attribut brand dans le composant :
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
Obtenir une certification!
95 $ S'INSCRIRE
Passer les données
Les accessoires sont également la façon dont vous transmettez des données d'un composant à un autre, en tant que paramètres.
Exemple
Envoyez la propriété "brand" du composant Garage au composant Car :
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Si vous avez une variable à envoyer, et non une chaîne comme dans l'exemple ci-dessus, il vous suffit de mettre le nom de la variable entre accolades :
Exemple
Créez une variable nommée carNameet envoyez-la au
Carcomposant :
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
const carName = "Ford";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Ou si c'était un objet :
Exemple
Créez un objet nommé carInfoet envoyez-le au
Carcomposant :
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
}
function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Remarque : les accessoires React sont en lecture seule ! Vous obtiendrez une erreur si vous essayez de modifier leur valeur.