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

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

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

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

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

你可以使用ReactChildren和ReactChild:

import React, { ReactChildren, ReactChild } from 'react';
 
interface AuxProps {
  children: ReactChild | ReactChildren;
}

const Aux = ({ children }: AuxProps) => (<div>{children}</div>);

export default Aux;

如果你需要传递平面数组的元素:

interface AuxProps {
  children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
}

这对我来说很管用:

interface Props {
  children: JSX.Element[] | JSX.Element
}

我建议使用children: React。现在改为ReactNode。

您可以创建一个简单的组件，它只输出子道具，没有类型或FC(功能组件)接口。你必须用空的jsx标签<>来换行，因为子标签可以是undefined或null:

import { FC } from "react";

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

——或——

import { FC } from "react";

export const Layout: FC = ({ children }) => <>{children}</>;

为了在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}</>;

对我来说，@ sibrens的答案还不够清楚，但我找到了这个SO答案，并将其全部内联(这可能不是最短的方法，但我发现最容易掌握的方法)。

function MyComponentWithChildren({
    customProp,
    children, /*notice the children are implicit*/
}: React.PropsWithChildren<{ customProp: any }>) {
    return <div>{children}</div>;
}