Reactコンポーネントが空であるか、子コンポーネントがないか確認してください

Question

Reactコンポーネントが空であるか、子コンポーネントがないかを確認するにはどうすればよいですか？たとえば、コンポーネントAというコンポーネントがある場合、コンポーネントBが含まれているかどうかを確認するにはどうすればよいですか？

Answer 1

this.props.childrenを使用すると、子コンポーネントを取得できます。子が1つだけの場合、this.props.childrenはその子コンポーネントを指します。そうでない場合は、子コンポーネントの配列を返します。

その配列、あなたがそれらを介してループにthis.props.children.mapを使用することができ、そしてあなたが名前を見つけることができ、またはそのようなコンポーネントのタイプの場合：

this.props.children.map(child => console.log(child.type))