作为包含子类型的类型，我使用:

type ChildrenContainer = Pick<JSX.IntrinsicElements["div"], "children">

这个子容器类型足够通用，可以支持所有不同的情况，并且与ReactJS API保持一致。

所以，在你的例子中，它会是这样的:

const layout = ({ children }: ChildrenContainer) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {children}
        </main>
    <Aux/>
)

为了在JSX中使用<Aux>，它需要是一个返回ReactElement<any> | null的函数。这就是函数分量的定义。

然而，它目前被定义为一个返回React的函数。ReactNode，这是一个更广泛的类型。正如React类型所说:

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

通过将返回值包装到React Fragment(<></>)中，确保不需要的类型被中和:

const aux: React.FC<AuxProps> = props =>
  <>{props.children}</>;

函数组件的返回类型在TypeScript中被限制为JSXElement | null。这是当前的类型限制，纯React允许更多的返回类型。

最小的演示片段

你可以使用类型断言或片段作为解决方案:

const Aux = (props: AuxProps) => <>props.children</>; 
const Aux2 = (props: AuxProps) => props.children as ReactElement; 

ReactNode

孩子们:反应。如果目标是为Aux提供强类型，那么ReactNode可能不是最优的。

几乎任何东西都可以赋值给当前的ReactNode类型，这相当于{}| undefined | null。对于你的情况，更安全的类型可能是:

interface AuxProps {
  children: ReactElement | ReactElement[]
}

例子:

由于Aux需要React元素作为子元素，我们意外地向它添加了一个字符串。然后上面的解决方案将错误与ReactNode对比-看看链接操场。

类字子函数对于非jsx道具也很有用，比如Render Prop回调函数。

我用的是下面的

type Props = { children: React.ReactNode };

const MyComponent: React.FC<Props> = ({children}) => {
  return (
    <div>
      { children }
    </div>
  );

export default MyComponent;

这对我来说一直都很有效:

type Props = {
  children: JSX.Element;
};

您也可以使用JSX。ElementChildrenAttribute

export default function Layout({children}: JSX.ElementChildrenAttribute) {
    return <div>
        {children}
    </div>
}