Enregistrement des valeurs de prop dans les composants fonctionnels possible?

Question

J'essaie de voir ce que props sont passés à mon composant. Y a-t-il un moyen de l'enregistrer dans JSX? J'utilise 2 composants fonctionnels comme dans le bloc de code suivant. De l'invocation je passe props en tant que props:{programs:'Hello',locale:'en'}. Il semble que les accessoires entrent dans le ProgramsSummaryParent très bien mais je reçois ce message sur le navigateur quand il essaie de rendre le ProgramsSummaryPlaceholder:

Type prop échoué: L'accessoire content est marqué comme nécessaire TableCell, mais sa valeur est undefined . Pourquoi ne puis-je pas passer le prop?

const ProgramsSummaryParent = ({programs, locale,}) => (
<BaseSummary locale={locale}> 
    <ProgramsSummaryPlaceholder prg={programs}/> 
</BaseSummary> 
); 

const ProgramsSummaryPlaceholder = ({ prg, intl, }) => (
<div className="programs-summary">  
    <Table isStriped={true} isPadded={true}> 
    <Table.Rows > 
     <Table.Row > 
     <Table.Cell content={prg.programs} /> 
     </Table.Row> 
    </Table.Rows> 
    </Table> 
</div> 
); 

Answer 1

Vous pouvez modifier votre composant enfant à retourner un bloc, vous pouvez ajouter des instructions arbitraires pour le débogage:

const ProgramsSummaryPlaceholder = ({ prg, intl, }) => { 
    console.log({ prg, intl }); 
    return (
    <div className="programs-summary">  
     <Table isStriped={true} isPadded={true}> 
     <Table.Rows > 
      <Table.Row > 
      <Table.Cell content={prg.programs} /> 
      </Table.Row> 
     </Table.Rows> 
    </Table> 
    </div> 
); 
} 

Lorsque vous avez terminé le débogage, il suffit de changer de nouveau en retour juste le JSX.

Answer 2

Utilisez l'extension de navigateur React Developer Tools. Après l'installation de l'extension, vous pouvez ouvrir l'outil de développement et sélectionner l'onglet Réagir. Là, vous verrez tous vos composants et vous pouvez sélectionner le composant que vous voulez et voir state et props qu'il reçoit dans le volet de droite.