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?
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} />
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
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'}]} />
Pourquoi pas?
Il suffit de faire <MyJsx propName: {commonProps} />
.