Javascript 是否可以在功能组件中记录道具值？

我试图查看哪些

道具

传递到我的组件。有没有办法把它记录在JSX中？我在下面的代码块中使用了两个功能组件

从调用中，我将

props

作为

props:{programs:'Hello'，locale:'en}

传递。道具似乎很好地进入了

程序的mmaryparent

，但当它试图呈现

程序的mmaryplaceholder

时，我在浏览器上看到了这条消息：

失败的道具类型：道具

内容

在

表格单元格

中标记为必需，但其值为

未定义

为什么我无法通过

道具

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>
);

const programsmmaryparent=（{programs，locale，}）=>(
);
常量程序语法占位符=（{prg，intl，}）=>(
);
使用浏览器扩展

安装扩展后，可以打开开发者工具并选择React选项卡。在那里，您将看到所有组件，您可以选择所需的组件，并在右侧窗格中看到它接收的
状态
和
道具。
您可以更改子组件以返回块，然后可以添加任意调试语句：

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>
  );
}

const programmaryplaceholder=（{prg，intl，}）=>{
log（{prg，intl}）；
返回(
);
}

调试完成后，只需将其改回仅返回JSX即可。
如果让子组件返回块，则可以添加任意语句，包括
控制台。log
@HunterMcMillen如何返回块？我试着把它放在{}中，但没有用。我在下面添加了一个示例。您是否打算将
content={prg}
传递到
Table.Cell
？@TuriS。所以我对这一切都是新手，但不是
props
作为key=value传递并作为
props.key
访问的吗？我希望这里也有类似的东西<代码>程序
只是键，它的值是我感兴趣的值。这不会显示我传递给
程序的
prg
道具。它只是显示
intl
。可能是因为程序undefined@ShubhamKhatri因此，在上面的示例中，我将
程序作为Hello传递。为什么它没有定义？