[英]JSX element type 'ReactElement<any> is not a constructor function for JSX elements. Type 'undefined' is not assignable to type 'Element | null'
I tried the recommended solution of deleting node_modules/
and yarn.lock
and reinstalling everything but it did not solve it.我尝试了删除
node_modules/
和yarn.lock
并重新安装所有内容的推荐解决方案,但没有解决。
I am making a simple router that renders children based on a prop:我正在制作一个简单的路由器,它根据道具呈现子级:
import React, { Fragment } from "react";
type RouterProps = {
currentRoute: string;
children: React.ReactNode;
};
const Router = ({ currentRoute, children }: RouterProps) => {
return React.Children.map(children, child =>
React.cloneElement(child as React.ReactElement<any>, { currentRoute })
);
};
type RouterViewProps = {
route: string;
children: any;
};
Router.View = ({ route, currentRoute, children }: RouterViewProps) => (
<div>{currentRoute === route ? <Fragment>{children}</Fragment> : null}</div>
);
export default Router;
I get the error when trying to use my component in the app:尝试在应用程序中使用我的组件时出现错误:
import React from "react";
import Router from "./components/Router";
import Home from "./components/Home";
function App() {
return (
<div>
<Router currentRoute="home">
<Router.View route="home">
<Home />
</Router.View>
</Router>
</div>
);
}
export default App;
Full error:完整错误:
TypeScript error in /Users/gonzo/Projects/JS/filex-workshops-registration/src/App.tsx(8,7):
JSX element type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any
, any>)>[] | null | undefined' is not a constructor function for JSX elements.
Type 'undefined' is not assignable to type 'Element | null'. TS2605
6 | return (
7 | <div>
> 8 | <Router currentRoute="home">
| ^
9 | <Router.View route="home">
10 | <Home />
11 | </Router.View>
The Router component works perfectly in my tests so I don't understand what's different in the app itself. Router 组件在我的测试中完美运行,所以我不明白应用程序本身有什么不同。
Router
is not a constructor for JSX since it does not return JSX. Router
不是 JSX 的构造函数,因为它不返回 JSX。
const Router = ({ currentRoute, children }: RouterProps) => {
return (
<>
{React.Children.map(children, child =>
React.cloneElement(child as React.ReactElement<any>, { currentRoute })
)}
</>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.