Question

我正在尝试查看传递给我的组件的props。有没有办法在JSX中记录它？我正在使用2个功能组件，如下面的代码块所示。

从调用中我将props作为props:{programs:'Hello',locale:'en'}传递。道具似乎进入ProgramsSummaryParent就好了，但是当我试图渲染ProgramsSummaryPlaceholder时，我在浏览器上收到此消息：

道具类型失败：道具content在TableCell标记为必需，但其值为undefined。

为什么我无法通过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

您可以更改子组件以返回块，然后可以添加任意语句以进行调试：

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

完成调试后，只需将其更改为仅返回JSX。

Answer 2

使用React Developer Tools浏览器扩展程序。

安装扩展程序后，您可以打开开发人员工具并选择React选项卡。在那里，您将看到所有组件，然后您可以选择所需的组件，并在右侧窗格中查看它收到的state和props。

是否可以在功能组件中记录prop值？

2 个答案: