我有以下使用react-router-dom的组件:
<Route path='/restaurants/:id' render={props => ( <Restaurant {...props} user={user} /> )} />
现在,在我的 Restaurant.tsx 代码中,我似乎找不出什么类型应该是下面的 props 的正确类型:
Restaurant.tsx
props
const Restaurant = (props: RouteComponentProps<{id: string}>) => { const a = props.match.params.id; const b = props.user; }
对于 RouteComponentProps<{id: string}> 类型,会为 a 分配一个没有错误的值。但是, b 并非如此
RouteComponentProps<{id: string}>
a
b
Property 'user' does not exist on type 'RouteComponentProps<{ id: string; }, StaticContext, unknown>'
props 的类型应该是什么,这样我才能获得使用 props.user 传递给组件的额外属性 user={user} ,而不会出现任何类型错误?
props.user
user={user}
上云精选
2核2G云服务器 每月9.33元起,个人开发者专属3年机 低至2.3折
为 Restaurant 组件的属性声明接口,并扩展 RouteComponentProps 接口。
Restaurant
RouteComponentProps
import React from 'react'; import { Route, RouteComponentProps } from 'react-router-dom'; interface RestaurantProps extends RouteComponentProps<{ id: string }> { user: any; const Restaurant = (props: RestaurantProps) => { const a = props.match.params.id; const b = props.user; return <div>Restaurant</div> const App = () => { const user = {}; return (