Que sont les props ?

Transmission&nbsp;: les props ressemblent à des attributs&nbsp;: name="Ada"
Réception&nbsp;: le composant les extrait dans sa liste de paramètres ( { name } ) et les utilise dans le JSX comme n'importe quelle variable

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 16 sur 42.

Réutiliser un composant est une bonne chose, mais trois étoiles identiques ne sont pas très utiles. Les Props vous permettent de passer des données à un composant, afin que chaque copie puisse être différente :

function Greeting({ name }) {
    return <p>Hello, {name}!</p>;
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Alan" />
        </div>
    );
}

Deux choses se produisent ici :

Transmission : les props ressemblent à des attributs : name="Ada"
Réception : le composant les extrait dans sa liste de paramètres ({ name }) et les utilise dans le JSX comme n'importe quelle variable

Même composant, données différentes, sortie différente : Hello, Ada! et Hello, Alan!. Les props permettent aux parents de configurer leurs enfants.

Essayez vous-même

Cette leçon ne comprend pas de défi de code.