reactjs - 无法在 Typescript : JSX Element type does not have any construct or call signatures 中编写高阶组件

Question

是的，我知道有人问过这个问题，但我找到的答案都没有解决这个问题。我正在用 Typescript 编写一个简单的高阶组件，以在呈现组件之前验证授权。到目前为止它看起来像这样:

export function withAuth(Component: React.ComponentType) {

    if (!Component) return null;

    useEffect(() => {
        verifyToken().then(res => console.log(res))
    }, []);

    return (
        <Component/>
    )
}

我有一个名为 EditorContainer 的更大的 FunctionComponent，我将其传递给 HOC 并从它自己的文件中导出:export default withAuth(EditorContainer);

它被导入为 import EditorContainer from "./modules/Editor/containers/EditorContainer"; 并抛出此错误。

我试过:

1. 向 HOC 传递一个组件的新实例而不是它的实例构造函数。这会引发不同的错误。
2. 更改或删除所有类型。错误仍然存​​在。
3. 更新 react、react-dom、@types/react 和 @types/react-dom。
4. 将 withAuth 大写为 WithAuth(我的想法已经用完了)。
5. 将组件从其原始位置移除(由 React Router 路由渲染)。没有区别。

似乎不允许在 TypeScript 中编写高阶组件。

Answer 1

关于您的解决方案为何有效，请参阅我的评论；但是您可以删除额外的功能。

export function withAuth(Component: React.ComponentType) {

    if (Component == null) { return () => null; }
    return () => {
        useEffect(() => {
            verifyToken().then(res => console.log(res))
        }, []);

        return (
            <Component/>
        )
    };
}