Bonjour a tous, 

J'apprend les bases de React en suivant un tutoriel

J'ai créé un composant <Card /> qui prend un lot de propriétés. 

Pour optimiser le code toute les propriété sont définis à l'aide de la syntaxe de décomposition. 

<Card
 key={item.id}
 {...item}
/>    

Ma question est la suivante, le fait que la propriété id n'est pas mentionné dans les props avec "..." c'est automatique ? 
Et quel est l'interet ? C'est une histoire de sécurité ? 

Merci

Hello,

Il faudrait voir (ou revoir) aussi les bases du JS sur la partie ES2015 et les suivants.

Ce n'est pas une question de sécurité ni d'optimisation, c'est juste que ça évite d'écrire tous les champs possible :

function Card ({ id, key, name, size, type, className = '' }) {
    return (
        <div className={`card ${className}`} key={key}>
            <p id={id}>D''autre props ...</p>
        </div>
    )
}

function App () {
    const items = [
        { id: 1, name: 'a', size: 'normal', type: 'primary' },
        { id: 2, name: 'b', size: 'normal', type: 'primary' },
        { id: 3, name: 'c', size: 'normal', type: 'primary' },
        { id: 4, name: 'd', size: 'normal', type: 'primary', className: 'card-invert' },
    ]
    return (
        <section>
            {items.map(item => (
                <Card key={item.id} {...item} />
            ))}
        </section>
    )
}

-
Edité par quenti77 8 juin 2022 à 21:34:44