reactjs - 使用 Route render 时，ReactComponent 没有与类型 'IntrinsicAttributes & { children?: ReactNode; }' 相同的属性

Question

使用时:

<Route path={rootPath} exact render={props => <LoginLayout {...props} />} />

在typescript LoginLayout中提示错误时:

Type '{ history: History<PoorMansUnknown>; location: Location<PoorMansUnknown>; match: match<any>; staticContext?: StaticContext | undefined; }' has no properties in common with type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2559)

我尝试添加:

const LoginLayout:FunctionComponent = (props: any) => { ... };

<Route path={rootPath} exact render={(props: any) => <LoginLayout {...props} />} />

但是这不起作用。我也尝试过:

const LoginLayout:FunctionComponent = (props: RouteComponentProps) => { ... };

<Route path={rootPath} exact render={(props: RouteComponentProps) => <LoginLayout {...props} />} />

这不起作用...

Answer 1

它会提示，因为您将 Prop (RouteComponentProps)传递给了不希望获得它们的组件。修复:

const LoginLayout: FunctionComponent<RouteComponentProps> = () => {...};

或者更短:

const LoginLayout: FC<RouteComponentProps> = () => {...};

Playground