您可以创建一个简单的组件，它只输出子道具，没有类型或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}</>;

这对我来说很管用:

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

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

函数组件的返回类型在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回调函数。

import { ReactNode, FC } from 'react'

type Props = { children: ReactNode }

const App: FC<Props> = ({children}) => (<div>{children}</div>)

你可以使用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[];
}

对我来说是JSX。元素”的作品,

interface childrenProps {
    children: JSX.Element;
}

const index = ({ children }: childrenProps) => {
    return (
        <>
            <NavBar />
            {children}
        </>
    );
};

export default index;