React/TypeScript：專門為組件輸入 props.children

Question

假設我們有一個渲染props.children的組件Foo和另一個組件Bar 。 兩個模塊都導出一個 props 接口。

有沒有辦法強制Foo的孩子只能是Bar類型？

理想情況下，我們可以在構建時使用 TypeScript 來完成此任務。

例子：

import { createElement, FC, ReactNode } from 'react';
import { Bar, BarProps } from '../Bar';

export interface FooProps {
  children?: ReactNode; // this works
  // children?: ReactNode<BarProps>; // nope
  // children?: Bar; // nope
}

export const Foo: FC<FooProps> = (props) => {
  return (
    <div>
      {props.children}
    </div>
  );
};

注意：我們沒有使用 PropTypes

Answer 1

試試這個（參考）

export interface FooProps {
  children?: React.ReactElement<BarProps> | React.ReactElement<BarProps>[]
}