[英]Type '(props: RouteProps) => JSX.Element' is not assignable to type 'PropsWithChildren<RouteProps>'
I am using typescript with react I wanted to render a component but getting typescript error我正在使用带有反应的打字稿我想渲染一个组件但收到打字稿错误
Type '(props: RouteProps) => JSX.Element' is not assignable to type 'PropsWithChildren'.类型 '(props: RouteProps) => JSX.Element' 不可分配给类型 'PropsWithChildren'。
Property 'component' is missing in type '(props: RouteProps) => JSX.Element' but required in type 'RouteProps'.类型“(props: RouteProps) => JSX.Element”中缺少属性“component”,但在“RouteProps”类型中需要。
import React, { ReactNode, PropsWithChildren } from "react";
import { Route, Redirect } from "react-router";
export interface RouteProps {
component: FunctionComponent;
}
interface PrivateRoutesProp {
// component: PropsWithChildren<RouteProps> // not works
// also having "noImplicitAny": true, [this was mandatory]
component: PropsWithChildren<???>; //what i have to use here,object is not working
exact: boolean;
path: string;
}
const PrivateRoute = ({ component: Component, ...rest }: PrivateRoutesProp) => (
<Route
{...rest}
render={(props) => (isLoggedIn ? <Component {...props} /> : <Redirect to="/" />)}
/>
);
export default PrivateRoute;
can anyone help me out of this谁能帮我解决这个问题
PropsWithChildren just type PropsWithChildren<P> = P & { children?: ReactNode };
PropsWithChildren 只需
type PropsWithChildren<P> = P & { children?: ReactNode };
It should include props of Route and custom props.它应该包括 Route 和自定义道具的道具。
Here my idea:这是我的想法:
export interface PrivateRoutesProp {
component: FunctionComponent;
exact: boolean;
path: string;
isLogin: boolean
}
const PrivateRoute = ({ component, isLogin, ...rest }: PropsWithChildren<PrivateRoutesProp & RouteProps>) => (
<Route
{...rest}
render={(props) => (isLogin ? React.createElement(component, props) : <Redirect to="/" />)}
/>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.