Je suis assez nouveau pour réagir et c'est un problème que j'essaie de résoudre.

Il existe un composant parent qui transmet les accessoires à l'enfant. Un de ces accessoires inclut un élément à rendre comme ceci:

<child componentToBeRendered = {component} />

Chez l'enfant, je veux prendre ce composant et lui passer un accessoire, qui est défini dans l'enfant lui-même.

function child(props){
    function toBePassed(){ ... }
    <props.componentToBeRendered fun = {toBePassed} />
}

Je sais que le code ci-dessus est incorrect et que nous ne pouvons pas utiliser <props.componentToBeRendered>. Alors, comment puis-je transmettre un accessoire personnalisé à ce composant?

La seule façon dont je peux penser à rendre le composant est comme: {props.componentToBeRendered};

Comment rendre ce composant avec un accessoire personnalisé défini dans l'enfant?

2
Giridhar 3 sept. 2020 à 08:49

3 réponses

Meilleure réponse

Vous pouvez renommer l'accessoire de composant passé, le rendre comme d'habitude et lui passer des accessoires comme d'habitude. Similaire à Choisir le type comme exécution

function Child(props){
    const ComponentToBeRendered = props.componentToBeRendered;

    function toBePassed(){ ... }

    return <ComponentToBeRendered fun={toBePassed} />;
}

J'ai généralement utilisé ce modèle avec la déstructuration de prop dans la signature de la fonction, en renommant le prop déstructuré.

function Child({ componentToBeRendered: ComponentToBeRendered }) {
  function toBePassed(){ ... }

  return <ComponentToBeRendered fun={toBePassed} />;
}
2
Drew Reese 3 sept. 2020 à 06:09

Je pense que vous ne devriez pas passer le composant comme accessoire Au lieu de cela, passez une valeur à l'enfant qui indique le composant à rendre.

function Parent(){
   return <Child toBeRendered="contact"/>
}
function Child(props){
   let toBeRenderd;
   switch(props.toBeRendered){
      case 'contact' :
          toBeRendered = Contact;
      default :
          toBeRendered = Info
   }
   return <toBeRendered/>
}
-1
Bebo Magdy 3 sept. 2020 à 06:05

Vous pouvez utiliser l'API de premier niveau de React, en particulier React.createElement, par exemple:

const MyChild1 = ({ num }) => <div>num1: {num}</div>;
const Parent = ({ comp }) => 
  <div>
    {React.createElement(comp, { num: 5 })}
    {React.createElement(comp, { num: 1 })}
  </div>
;
1
MorKadosh 3 sept. 2020 à 06:02