Objet de passage que les accessoires de jsx

J'ai un objet contient plusieurs communes de la clé-valeur des accessoires, des que je veux transmettre à certains jsx. Quelque chose comme ceci: 

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

Je veux que cette fonction de passage individuel des accessoires:

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

Est-ce possible?

InformationsquelleAutor Sabrina | 2018-03-03
  1. 57

    Est-ce possible?

    Oui, pourquoi vous pensez que ce n'est pas possible, mais la façon dont vous êtes l'envoi n'est pas correct.

    Sens de <MyJsx commonProps /> est:

    <MyJsx commonProps={true} />

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

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

    Mise à jour:

    Si vous avez un objet et veut transmettre toutes les propriétés distinctes prop, de l'écrire comme ceci:

    <MyJsx {...commonProps} />
    • Ce n'est pas ce dont j'ai besoin. J'ai édité ma question, de sorte qu'il sera plus clair. J'ai besoin d'accessoires pour être envoyé comme individu accessoires
    • mise à jour de la réponse, merci de vérifier. L'écrire comme ceci: <MyJsx {...commonProps} />
    • juste ce dont j'avais besoin
    • Oui! D'autre j'ai fini par faire des choses comme <p>{props.props.hello}</p>
    InformationsquelleAutor Mayank Shukla
  2. 19

    Vous pouvez utiliser le la propagation de l'opérateur pour ce faire.

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

    Maintenant ce que toutes les propriétés que vous avez dans commonProps sera envoyé comme individu accessoires pour MyJsx

    • Cette astuce m'a permis de switch 10 lignes de code pour 1. Beaucoup apprécié!
    • Je suis heureux que cela vous a aidé
    InformationsquelleAutor G_S
  3. 4

    Vous devez utiliser des doubles accolades, comme ceci:

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

    Ou de passer de nombreux objets:

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

    C'est tout simplement JS syntaxe à l'intérieur d'accolades.

    Un dernier élément pourrait ressembler à ceci

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

    Vous pouvez passer des accessoires en tant qu'objet de deux façons:-

    const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};

    1.À l'aide de la propagation de l'Opérateur:-

    <MyJsx {...commonProps} />

    2.Passez simplement que les accessoires:-

    <MyJsx commonProps = {commonProps ? commonProps : true} />
    InformationsquelleAutor sneha