与 Typescript 反应 |功能组件 |类型 'boolean' 不可分配给类型 'ReactElement<any, any>'

Question

我已经建立了一个使用 TypeScript 和 React 的项目。所以我继续创建一个使用 children 属性的 Layout 组件。这是我当前的代码：

import React from 'react';

type LayoutProps = {
    children: React.ReactNode
}

const Layout: React.FC<LayoutProps> = ({children}) => (
    <>
        {children}
    </>
)

export default Layout;

出于某种原因，我收到了标题中提到的错误。

Type 'boolean' is not assignable to type 'ReactElement<any, any>'.

我已经搜索了一些，但仍然不确定为什么会收到此错误。我还应该提到这是一个 NextJS 项目。当 NextJS 尝试编译代码时，我收到此错误：

Answer 1

当您使用 React.FC 类型时，您不必指定 children 属性。它会自动添加到道具中。所以在你的情况下，你可以简单地做：

import React from 'react';

// You don't have to provide a type argument to `React.FC`
const Layout: React.FC = ({children}) => (
    <>
        {children}
    </>
)

export default Layout;

为了清楚起见，下面是 FunctionComponent 接口的定义：

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}

Answer 2

问题似乎是 Typescript 不明白这是 JSX。正如 Robert Kawecki 所建议的，从 .ts 文件更改为 .tsx 文件解决了问题！