0
votes

React Transfer l'accessoire interne du parent à l'enfant

<Parent><!-- has an internal prop 'json', is set from a fetch request -->
  <div>
    <div>
       <Child /><!-- how can I send 'json here? -->
Do I have to use React context? I find it very confusing. After writing a component like that and looking back at the code I am just confused https://reactjs.org/docs/context.html

reactjs jsx

1 commentaires

Qu'entendez-vous par «accessoire interne»? Veuillez montrer comment il est défini.

3 Réponses :

1
votes

https://codesandbox.io/embed/bold-bardeen-4n66r ? fontsize = 14

Jetez un œil au code, le contexte n'est pas si nécessaire, vous pouvez élever les données au composant parent, les mettre à jour et les partager à partir de là uniquement.

2 commentaires

J'aime cela parce que c'est assez simple, facile à lire et convient à mon cas particulier, mais je pense que si vous commencez à avoir beaucoup d'enfants différents au fond de l'arbre, vous devez passer l'accessoire de chaque niveau de parent, cela devient un gâchis impossible à entretenir , puis le contexte React comme je l'ai lié plus tôt je pense. Je vais donc accepter cette réponse, mais les gens doivent en tenir compte. Cela pourrait ne pas convenir à vos besoins particuliers!

Ouais, si nous avons autant de structure hiérarchique, il vaut mieux utiliser Context.

1
votes

Pour ce que je sais, il existe 3 ou 4 alternatives:

1) Utiliser le contexte comme vous l'avez dit, donc déclarer un fournisseur puis le consommer avec useContext () au composant où vous besoin de ça. Cela peut réduire la réutilisabilité des composants,

2) Lift state & props, parmi les composants descendants

const App = (props: any) => {
// Do some stuff here
return (
    <Parent>
    <GrandChild myProp={props.myProp}></GrandChild>
    </Parent>
);
};

const Parent = (props: any) => {
return (
    <div>
    <Child>{props.children}</Child>
    </div>
);
};

const Child = (props: any) => {
return <div>{props.children}</div>;
};

const GrandChild = ({ myProp }: any) => {
return <div>The child using myProp</div>;
};

3) Utilisation d'enfants:

const App = (props: any) => {
// Do some stuff here
return <Parent myProp={props.myProp}></Parent>;
};

const Parent = ({ myProp }: any) => {
return (
    <div>
    <Child myProp={myProp}></Child>
    </div>
);
};

const Child = ({ myProp }: any) => {
return (
    <div>
    <GrandChild myProp={myProp}></GrandChild>{" "}
    </div>
);
};

const GrandChild = ({ myProp }: any) => {
return <div>The child using myProp</div>;
};

export default App;

4) Passez le petit-enfant lui-même comme accessoire dans le parent, en le soulevant vers le bon enfant et en le rendant là-bas. C'est en fait un mélange des 2 alternatives précédentes.

0 commentaires

0
votes

Voici un exemple simple où vous envoyez la réponse via des accessoires à child. J'ai utilisé un échantillon ( api ) pour le démontrer.

--------- --------------- Composant parent ------------------------

import React, { Component } from "react";

class Child extends Component {
  state = {};
  render() {
    return (
      <div>
        {this.props.parentResponse !== "" ? (
          <div>{this.props.parentResponse.title}</div>
        ) : (
          <div />
        )}
      </div>
    );
  }
}

export default Child;

0 commentaires