Repos
的组件。export class Repos extends React.Component<ReposProps, {}> { ... }
这是在 Router
内部创建的
<Router history={browserHistory}>
{/* ... */}
<Route path="/repos" component={Repos}>{/* ... */}</Route>
{/* ... */}
</Router>
在 Repos
中,有一个方法会从 HTML 表单中获取一些参数,并构造一个新的路径来引导浏览器:
handleSubmit(event: React.FormEvent) {
/* ... (define userName and repo vars) */
const path = `/repos/${userName}/${repo}`
this.context.router.push(path);
}
我的问题是,最后一行的context
和router
的类型是什么?
React文档中关于Context中提到,通常在每个元素中定义context。在这里,一个聪明的想法似乎是在Repos
中定义context
,并使用一个接口来扩展react-router的TypeScript类型定义中定义的某个接口。
interface ReposContext extends Something /* ??? */ { }
这里,Something
会被定义为某种类型,该类型具有 push
方法。
API 没有说明 Router
具有 push
方法,尽管 术语表 中有,这很令人困惑。无论如何,DefinitelyTyped 上的类型定义在 Router
下没有定义 push
方法(虽然我不认为它们是完美的,但这个遗漏对我来说似乎并非偶然)
同样的 API 还指出了 RouterContext
,其中提到了 context.router
-- context.router
定义了 push()
以及许多其他方法。
那么我注意到在 react-router 的类型定义中的 history.d.ts 中,接口 History
具有所有相同的方法(再加上一些其他方法)
interface ContextRouter extends History { }
interface ReposContext {
router: ContextRouter
}
我仍然怀疑,因为虽然ContextRouter
扩展了History
,但它并不完全合理。