機能コンポーネントのプロット値のロギングは可能ですか？

Question

propsが私のコンポーネントに渡されているのを確認しようとしています。 JSXでログインする方法はありますか？私は次のコードブロックのように2つの機能コンポーネントを使用しています。

私はpropsをprops:{programs:'Hello',locale:'en'}として渡しています。小道具がProgramsSummaryParentにうまく取得するようだが、それはレンダリングしようとしたとき、私は、ブラウザ上でこのメッセージを取得していますProgramsSummaryPlaceholder：

失敗しましたプロップタイプ：TableCellに必要ですが、その値はundefinedあるようcontentがマークされている小道具。

なぜ私は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を表示することができます。