无法将 HOC 与 React-Router 一起使用:类型 'Element' 不可分配给类型 'ComponentType<any>

Unable to use HOC with React-Router: Type 'Element' is not assignable to type 'ComponentType<any>

我有一个带有 React-Router 的高阶函数,但无法使其工作,无论是通过这种方式还是使用

return class extends React.Component { render{ ... }

export const withHeaderAndFooter = (component: ComponentType) => {
  return (
    <div className="flex flex-col h-full">
      <Header />
      {component}
      <Footer />
    </div>
  );
};


但这失败了:Type 'Element' is not assignable to type 'ComponentType<any>

import { withHeaderAndFooter } from "./layout";

// prettier-ignore
const App = () => {
  return (
    <Router>
        <Switch>
          <Route path="/" exact component={withHeaderAndFooter(Home)} />
          <Route path="/login" component={withHeaderAndFooter(Login)} />
          <Route path="*" component={NotFound} />
        </Switch>
    </Router>
  );
};

这失败了:index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

const App = () => {
  return (
    <Router>
        <Switch>
          <Route path="/" exact component={() => withHeaderAndFooter(Home)} />
          <Route path="/login" component={() => withHeaderAndFooter(Login)} />
          <Route path="*" component={NotFound} />
        </Switch>
    </Router>
  );
};

我正在使用:

相关: HOC : Type 'Element' is not assignable to type 'FC<P>'

您用于呈现组件的语法错误

export const withHeaderAndFooter = (component: ComponentType) => {
  return (
    <div className="flex flex-col h-full">
      <Header />
      {component} <- wrong syntax
      <Footer />
    </div>
  );
};

渲染组件的正确语法:

export const withHeaderAndFooter = (Component: ComponentType) => {
  return (
    <div className="flex flex-col h-full">
      <Header />
      <Component />
      <Footer />
    </div>
  );
};

注意变量名的第一个字符必须大写,以告知 JSX 解析器变量是自定义 React 组件而不是 HTML 标签。