无法将 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>
);
};
我正在使用:
- @types/react": "^17.0.5"
- @types/react-dom": "^17.0.0"
- 反应": "^17.0.2"
- 反应-dom": "^17.0.2"
- react-router-dom": "^5.2.0"
相关:
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 标签。
我有一个带有 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>
);
};
我正在使用:
- @types/react": "^17.0.5"
- @types/react-dom": "^17.0.0"
- 反应": "^17.0.2"
- 反应-dom": "^17.0.2"
- react-router-dom": "^5.2.0"
相关: 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 标签。