React で子要素が特定のコンポーネントかどうかを調べる

まず、props で渡された children を React.Children.toArray で配列に変換する。

const childElements = React.Children.toArray(children);

null は正当な React.Node なので、ここで null チェックは必要ない。

次に、ReactElement の type プロパティをチェックすることでコンポーネントのクラス/関数を確認できるのだが、toArray() で返ってくる配列の要素は ReactElement とは限らないので React.isValidElement() を使って ReactElement かどうかを確認する。

const lastElement = childElements[childElements.length - 1];

if (React.isValidElement(lastElement)) {
  if (lastElement.type === MyComponent) {
    console.log('The last element is MyComponent');
  }
}

配列への範囲外アクセスは単に undefined を返すので境界チェックは必要ない。また、TypeScript では、isValidElement() が型ガードとして実装されているので、lastElement.type にアクセスしてもコンパイルエラーにはならない。

function isValidElement<P>(object: {} | null | undefined): object is ReactElement<P>;