1
votes

Passer plein d'accessoires pour faire réagir les enfants

Disons que je passe de nombreux accessoires à un composant enfant. Actuellement, je fais:

function ParentComp(){
  const [state1, setState1] = useState();
  const [state2, setState2] = useState();

  function someFunction(){
    // code
  }

  const data = dataReturningFunction(state2);

  return(
    <ChildComp
      state1={state1}
      setState1={setState1}
      state2={state2}
      setState2={setState2}
      someFunction={someFunction}
      data={data}
      // etc... 
    />
  )
}

function ChildComp(props){
  // access everything with props.state1 etc...
}

J'utilise les données / code / fonctions chez d'autres enfants et le parent, je ne peux donc pas tout rétrograder à l'enfant.

Le problème, c'est quand il y a plus de 10 propriétés que je transmets ... je me répète beaucoup.

Je suis sûr qu'il y a quelque chose de simple et d'évident, mais j'apprends, et je n'ai pas pu trouver un moyen plus simple.

reactjs

0 commentaires

3 Réponses :

1
votes

Deux méthodes que vous pouvez utiliser pour transmettre des accessoires aux composants enfants

revenir( )

{... this} enverra tout le composant de classe courant au composant enfant et il recevra toutes les variables, états, accessoires et méthodes

Vous pouvez utiliser l'API Context pour transmettre des accessoires aux composants enfants, mais les fonctions que nous ne pouvons pas envoyer avec cela

La première option est préférable

2 commentaires

Cela ne supposerait-il pas que j'utilise le constructeur de classe? J'utilise des composants fonctionnels.

Oui, cela fonctionnera dans le cas des composants de classe, pour les composants fonctionnels, nous pouvons créer une variable et transmettre cette const compProp = {state1, state2, setState2, handleFunc, dataVar};

4
votes

Vous pouvez diffuser un objet comme:

function ParentComp(){
  const [state1, setState1] = useState();
  const [state2, setState2] = useState();

  function someFunction(){
    // code
  }

  const data = dataReturningFunction(state2);

  const childProps = { 
     state1, 
     setState1,
     state2, 
     setState2,
     someFunction,
     data
  };

  return(
    <ChildComp {...childProps} />
  )
}

3 commentaires

Est-ce que la propagation m'empêche d'avoir à écrire chez l'enfant: props.childProps.state1 etc? J'apprends encore son utilité

Non en fait, vous pouvez utiliser les accessoires passés comme props.state1 , props.state2 et ainsi de suite

Vous utiliserez ensuite props.state1 dans l'enfant.

2
votes

Passez simplement un objet en tant qu'objet prop unique avec tous les attributs dont vous avez besoin

function ChildComponent ({state1,setState1,state2}){
    // ...
}

Et puis vous pouvez déconstruire l'objet props directement dans l'argument du composant enfant comme ceci

return(
    <ChildComp
      propsObj=
        {
          state1,
          setState1,
          sate2
          // and so on 
        }
    />
  )

De cette façon, vous n'avez pas à saisir le préfixe props lors du référencement des propriétés

0 commentaires