Question

我正在使用带有响应的打字稿，我想渲染一个组件，但出现打字稿错误

类型'（props：RouteProps）=> JSX.Element'不能分配给类型'PropsWithChildren'。
类型'（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;

有人可以帮我吗

Answer 1

PropsWithChildren仅type PropsWithChildren<P> = P & { children?: ReactNode }; 它应该包括Route道具和自定义道具。

这是我的主意

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="/" />)}
    />
);

类型'（props：RouteProps）=> JSX.Element'不能分配给类型'PropsWithChildren <RouteProps>'

1 个答案: