web-dev-qa-db-fra.com

Passer / accéder aux accessoires dans le composant enfant apatride

Je sais que vous pouvez passer tous les accessoires d'un composant React à son composant enfant comme ceci:

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

Mais comment récupérer ensuite ces accessoires si le composant enfant est sans état? Je sais que si c'est un composant de classe, vous pouvez simplement y accéder en tant que this.prop.whatever, mais que passez-vous comme argument dans le composant sans état?

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

Quand tu écris

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

De tous les accessoires que vous passez au childComponent vous êtes juste en train de déstructurer pour obtenir seulement someProp. Si le nombre d'accessoires que vous souhaitez utiliser dans ChildComponents sont dénombrables (peu nombreux) parmi le nombre total d'accessoires disponibles, la déstructuration est une bonne option car elle offre une meilleure lisibilité.

Supposons que vous souhaitiez accéder à tous les accessoires du composant enfant, vous n'avez pas besoin d'utiliser {} autour de l'argument et vous pouvez l'utiliser comme props.someProp

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

Recherchez-vous la syntaxe d'argument nommée ES6 (qui est simplement une déstructuration)?

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

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

Facultativement, il existe un deuxième argument à votre fonction selon que vous avez spécifié un contexte pour votre composant ou non.

Il serait peut-être plus utile avec un lien vers le docs . Comme indiqué dans le premier article sur les composants fonctionnels . Quels que soient les accessoires transmis au composant, ils sont représentés comme un objet transmis comme premier argument à votre composant fonctionnel.

Pour aller un peu plus loin, à propos de la notation étalée dans jsx.

Lorsque vous écrivez dans un composant:

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

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

{ prop1: value1, prop2: value2 }

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

Donc, lorsque vous utilisez la syntaxe spread avec un objet JS, c'est en fait un raccourci vers ce

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

Est équivalent à

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

Et compile en fait

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

Et vous pouvez bien sûr avoir la deuxième syntaxe, mais faites attention à l'ordre. La syntaxe la plus spécifique (prop = valeur) doit venir en dernier: l'instruction la plus spécifique vient en dernier.

Si tu fais :

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

Il compile pour

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

Si vous faites (ce que vous devriez probablement faire)

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

Il compile pour

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

Où étend est * Object.assign (ou un polyfill s'il n'est pas présent).

Pour aller plus loin, je recommanderais vraiment de prendre le temps d'observer la sortie de Babel avec leur éditeur en ligne . C'est très intéressant pour comprendre comment fonctionne jsx, et plus généralement comment implémenter la syntaxe es6 avec les outils ES5.

10
adz5A
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>
}
4
anand

Il s'agit d'une excellente tactique pour réduire le gonflement du code. Voici un exemple avec 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 fais <ParentClass date={todaysdatevar} />, Les accessoires getCallBackFunc ou date seront disponibles pour la classe SomeComponent .

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

1
HoldOffHunger

Je pensais que j'ajouterais une simple syntaxe de déstructuration ES2015 que j'utilise pour passer tous les accessoires d'un parent fonctionnel à un composant enfant fonctionnel.

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

Ou si j'ai plusieurs objets (accessoires du parent, plus n'importe quoi d'autre), je veux passer à l'enfant comme accessoires:

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

Cette syntaxe déstructurante est similaire aux réponses ci-dessus, mais c'est ainsi que je transmets les accessoires des composants fonctionnels, et je pense qu'elle est vraiment propre. J'espère que ça aide!

1
Lionel

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

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

Mais comment récupérer ensuite ces accessoires si le composant enfant est sans état?

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

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

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

Si vous Babel-it cela créera quelque chose comme ceci:

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

Utiliser ceci

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>
}
0
ruucm