De passage/l'Accès des accessoires enfant apatride composant

Je sais que vous pouvez passer tous une réagir composants accessoires pour c'est enfant composant comme ceci:

const ParentComponent = () => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...this.props} />
   </div>
)

Mais comment voulez-vous ensuite de récupérer ces accessoires si le composant enfant est apatride? Je sais si c'est une classe de composant, vous pouvez simplement y avoir accès comme this.prop.whatever, mais que voulez-vous passer comme argument dans les apatrides composant?

const ChildComponent = ({ *what goes here?* }) => (
   <div>
      <h1>Child Component</h1>
   </div>
)
  • Travaillez-vous avec une composante fonctionnelle ou composant de classe?
  • Oui - mon installation est comme je l'ai indiqué dans le post original
InformationsquelleAutor Paulos3000 | 2017-01-23
  1. 17

    Lorsque vous écrivez

    const ChildComponent = ({ someProp }) => (
   <div>
      <h1>Child Component {someProp}</h1>
   </div>
)

    De tous les accessoires que vous êtes de passage à la childComponent vous êtes juste de déstructuration pour obtenir seulement someProp. Si le nombre d'accessoires que vous souhaitez utiliser dans ChildComponents sont dénombrables(quelques) parmi le nombre total d'accessoires qui sont disponibles, déstructuration est une bonne option, car il offre une meilleure lisibilité.

    Supposons que vous souhaitez accéder à tous les accessoires dans le composant enfant, alors vous ne devez pas utiliser {} autour de l'argument et vous pouvez l'utiliser comme props.someProp

    const ChildComponent = (props) => (
   <div>
      <h1>Child Component {props.someProp}</h1>
   </div>
)
    InformationsquelleAutor Shubham Khatri
  2. 10

    Vous êtes à la recherche pour l'ES6 argument nommé syntaxe (qui n'est qu'déstructuration) ?

    const ChildComponent = ({ propName }) => (
    <div>
     <h1>Child Component</h1>
 </div>
)

const ChildComponent = (props) => ( //without named arguments
    <div>
     <h1>Child Component</h1>
 </div>
)

    En option, il existe un deuxième argument à votre fonction en fonction de si vous avez spécifié un contexte pour votre composant ou pas.

    Il serait peut-être plus utile wityh un des liens de la docs. Comme indiqué dans le premier article sur composants fonctionnels. Quels que soient les accessoires transmis au composant est représenté par un objet passé en premier argument de votre composante fonctionnelle.

    Aller un peu plus loin, à propos de la propagation de la note dans les jsx.

    Lorsque vous écrivez dans un composant :

    <Child prop1={value1} prop2={value2} />

    Ce que votre composant est un objet ordinaire qui ressemble à ceci : 

    { prop1: value1, prop2: value2 }

    (Notez que ce n'est pas une Carte, mais un objet avec uniquement les chaînes que les clés).

    Ainsi, lorsque vous êtes à l'aide de la propagation syntaxe, un objet JS il s'agit d'un raccourci vers cette 

    const object = { key1: value1, key2: value2 }
<Component {...object}/>

    Est équivalent à 

    <Component key1={value1} key2={value2} />

    Et effectivement compile de 

    return React.createElement(Component, object); //second arg is props

    Et vous pouvez bien sûr la deuxième syntaxe, mais être prudent de l'ordre. Le plus spécifique de la syntaxe (prop=valeur) doit être le dernier : le plus spécifique de l'instruction vient en dernier.

    Si vous n' :

    <Component key={value} {...props} />

    Il compile à

    React.createElement(Component, _extends({ key: value }, props));

    Si vous faites ce que vous devriez probablement)

    <Component {...props} key={value} />

    Il compile à 

    React.createElement(Component, _extends(props, { key: value }));

    Où s'étend est *de l'Objet.attribuer (ou un polyfill si pas présent).

    Pour aller plus loin, je voudrais vraiment vous recommandons de prendre le temps d'observer la sortie de Babel avec leur éditeur en ligne. C'est très intéressant de comprendre comment jsx œuvres, et plus généralement la façon dont vous pouvez mettre en œuvre es6 syntaxe avec ES5 outils.

    • En fait j'essaie d'éviter de lister tous les accessoires dans le composant parent comme il est détaillé. Si je veux utiliser le {...this.props} de la syntaxe. Je ne sais pas comment accéder à ces dans le composant enfant.
    InformationsquelleAutor adz5A
  3. 4
    const ParentComponent = (props) => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...props} />
   </div>
);

const ChildComponent = ({prop1, ...rest}) =>{
  <div>
    <h1>Child Component with prop1={prop1}</h1>
    <GrandChildComponent {...rest} />
  </div>
}

const GrandChildComponent = ({prop2, prop3})=> {
  <div>
    <h1>Grand Child Component with prop2={prop1} and prop3={prop3}</h1>
  </div>
}
    InformationsquelleAutor anand
  4. 1

    J'ai pensé que je voudrais ajouter une simple ES2015, déstructuration de la syntaxe que j'utilise pour passer tous les accessoires fonctionnels parent à un enfant composant.

    const ParentComponent = (props) => (
  <div>
    <ChildComponent {...props}/>
  </div>
);

    Ou si j'ai plusieurs objets (accessoires de parents, plus rien d'autre), je veux transmis à l'enfant que les accessoires:

    const ParentComponent = ({...props, ...objectToBeAddedToChildAsProps}) => (
  <div>
    <ChildComponent {...props}/>
  </div>
);

    Cette déstructuration de la syntaxe est similaire pour les réponses ci-dessus, mais c'est la façon dont je passe les accessoires de composants fonctionnels, et je pense que c'est vraiment très propre. J'espère que cela aide!

    • C'est certainement mieux que toute autre réponse ici -- même s'il aurait été utile de disposer d'une définition de classe d'exemple, qu'une instanciation exemple. Aussi, je pense que ton deuxième exemple, on pourrait utiliser un peu de battage de sortir.
    InformationsquelleAutor Lionel
  5. 1

    C'est une excellente tactique pour le code réduction de ballonnements. Voici un exemple avec une ParentClass.js :

    import React from 'react';
import SomeComponent from '../components/SomeComponent.js';

export default class ParentClass extends React.Component {
    render() {
        <SomeComponent
            {...this.props}
        />
    }
}

    Si je le fais, <ParentClass getCallBackFunc={() => this.getCallBackFunc()} />, ou si je ne <ParentClass date={todaysdatevar} />, les accessoires getCallBackFunc ou date sera disponible à la SomeComponent classe.

    Source: https://zhenyong.github.io/react/docs/transferring-props.html

    InformationsquelleAutor HoldOffHunger
  6. 0

    Mais comment voulez-vous ensuite de récupérer ces accessoires si le composant enfant est apatride?

    const ChildComponent = ({ *what goes here?* }) => (
   <div>
      <h1>Child Component</h1>
   </div>
)

    ChildComponent contient le nom et le props sera l'argument de la flèche en fonction de la syntaxe tout comme vous avez besoin de:

     const ChildComponent = props => (
   <div>
     <p>{props.value ? props.value : "No value."}</p>
   </div>
 );

    Si vous Babel-il créer quelque chose comme ceci:

     var ChildComponent = function ChildComponent(props) {
   return React.createElement(
     "div",
     null,
     React.createElement(
       "p",
       null,
       props.value ? props.value : "No value."
     )
   );
 };
    InformationsquelleAutor prosti
  7. 0

    Pour une raison quelconque, ce qui semble fonctionner pour moi est une variation sur Shubham la réponse ci-dessus: 

    const ChildComponent = props => (
   <div>
      <h1>Child Component {props[0].someProp}</h1>
   </div>
)
    InformationsquelleAutor skube
  8. 0

    À l'aide de cette

    const ParentComponent = ({ prop1, prop2, prop3 }) => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...{ prop1, prop2, prop3 }} />
   </div>
);

const ChildComponent = ({ prop1, prop2, prop3 }) =>{
  <div>
    <h1>Child Component with prop1={prop1}</h1>
    <h1>Child Component with prop2={prop2}</h1>
    <h1>Child Component with prop2={prop3}</h1>
  </div>
}
    • Je vois "prop1, prop2, prop3" reviennent plusieurs fois ici. Je pense que l'idée est d'avoir un effet sans les copier/coller des listes d'arguments à chaque fois.
    InformationsquelleAutor ruucm