reactjs - 类型 'IntrinsicAttributes & { children?: ReactNode; }' 上不存在属性

Question

我有由 Create-React-App 创建的 react 项目有以下包(提到与我的问题相关的包):

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"typescript": "^3.9.2",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0"

我创建了一个简单的 HOC(现在什么都不做，但我稍后会添加我的逻辑)，如下所示:

type Props = {
    [key: string]: any;
};


const connect = function (Component: FunctionComponent): FunctionComponent {
    const ComponentWrapper = function (props: Props): ReactElement {
        return <Component {...props} />;
    };

    return ComponentWrapper;
};

并像这样导出我的组件:

    const Test: FunctionComponent<Props> = function ({ message }: Props) {
        return (
            <div>{message}</div>
        );
    };


export default connect(Test);

并像这样使用这个组件:

<Test message="Testing message" />

但是在编译器中出错:

Type '{ message: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'message' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.  TS2322

我已经尝试过人们在其他类似的 Stack Overflow 问题和谷歌上找到的文章中提出的建议，但到目前为止还没有任何效果。

Answer 1

const connect = function (Component: React.FC): React.FC<Props> {
    const ComponentWrapper = function (props: Props): JSX.Element {
        return <Component {...props} />;
    };

    return ComponentWrapper;
};

重新启动编译器后它会正常工作。