web-dev-qa-db-fra.com

Passer un objet comme accessoire à jsx

J'ai un objet contient plusieurs accessoires clé-valeur communs, que je veux transmettre à certains jsx. Quelque chose comme ça: 

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />

Je veux que cela fonctionne comme des accessoires individuels de passage:

<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>

Est-ce possible? 

reactjsjsxreact-props
15
Sabrina

Est-ce possible?

Oui, pourquoi vous pensez que ce n'est pas possible, mais la façon dont vous envoyez n'est pas correcte.

Signification de <MyJsx commonProps /> est:

<MyJsx commonProps={true} />

Donc, si vous ne spécifiez aucune valeur par défaut, il prendra true. Pour transmettre l'objet, vous devez l'écrire comme ceci:

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps={commonProps} />

Mettre à jour:

Si vous avez un objet et que vous voulez transmettre toutes les propriétés séparément, écrivez-le comme ceci:

<MyJsx {...commonProps} />
25
Mayank Shukla

Vous pouvez utiliser l'opérateur spread pour le faire.

You can simply do <MyJsx {...commonProps} />

Maintenant, quelles sont toutes les propriétés que vous avez en commun 

9
G_S

Vous devez utiliser des doubles accolades, comme ceci:

messages={{tile:'Message 1'}}

Ou pour passer de nombreux objets:

messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]}

C'est simplement la syntaxe JS entre accolades.

Un composant final pourrait ressembler à ceci

<Chat title="Some str" messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]} />
1
sharp

Pourquoi pas?

Il suffit de faire <MyJsx propName: {commonProps} />.

0
Amanshu Kataria