代码之家 › 专栏 › 技术社区 › linuxNoob

是否可以在功能组件中记录属性值?

jsx reactjs javascript

linuxNoob · 技术社区 · 7 年前

我想看看什么 props 正在传递到我的组件。有没有办法将其记录在JSX中?我在下面的代码块中使用了两个功能组件。

从我传递的召唤像 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>
);

2 回复 | 直到 7 年前

Hunter McMillen zellus 7 年前

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

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即可。