React Node是以下类型之一:

布尔值(被忽略) Null或undefined(被忽略) 数量 字符串 React元素(JSX的结果) 上述任意一个的数组，可能是嵌套的数组

import { ReactNode, FC } from 'react'

type Props = { children: ReactNode }

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

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

您也可以使用JSX。ElementChildrenAttribute

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

查找任何类型的一般方法是通过示例。typescript的美妙之处在于，只要你有正确的@types/ files，你就可以访问所有类型。

为了自己回答这个问题，我想到了一个react使用的组件，它有子道具。你首先想到的是什么?<div />怎么样?

你所需要做的就是打开vscode，用@types/react在react项目中创建一个新的。tsx文件。

import React from 'react';

export default () => (
  <div children={'test'} />
);

将鼠标悬停在儿童道具上显示类型。你知道什么——它的类型是ReactNode(不需要ReactNode[])。

然后，如果单击进入类型定义，它会直接将您带到来自DOMAttributes接口的子定义。

// node_modules/@types/react/index.d.ts
interface DOMAttributes<T> {
  children?: ReactNode;
  ...
}

注意:此过程应用于查找任何未知类型!他们都在那里等着你去发现他们:)

你应该知道任何react组件都应该返回null或react。元素，但道具的类型。children是React。ReactNode，所以你需要使用这些道具。子元素，使babel配置元素的构造函数。 任何react组件的第二个规则是，命名的第一个字母应该是大写字母，以让react识别出该组件不是HTML标记。

代码应该是这样的。

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

另一个提示，如果你仍然使用typescript，函数组件的类型应该是React。像这样的FC

type Props = {
   title: string;
}

const Aux:React.FC<Props> = (props) =>
(
    <div>
        <h3>{props.title}</h3>
        { props.children }
        {/* children is exist by default in type React.FC */}
    </div>
)