如何将服务实例传递给打字稿中的反应路由器组件答案

【问题标题】：How to pass an instance of a service to a react router component in typescript如何将服务实例传递给打字稿中的反应路由器组件
【发布时间】：2017-09-03 01:14:06
【问题描述】：

我们有以下代码：

//routes.tsx
const auth = new AuthService();

export default <Route component={ Layout }>
    <Route path='/login' components={{body:Login}}
</Route>;

//layout.tsx
export interface LayoutProps {
    body: React.ReactElement<any>
}

我希望登录组件能够访问在 routes.tsx 中实例化的身份验证服务

按照我的理解，我必须在 LayoutProps 接口中添加一些内容，但我找不到允许传递 AuthService 实例的类型。

【问题讨论】：

也许这不是最佳实践，但您可以从路由文件export const auth = new AuthService() 中导出 AuthService，然后您可以将其导入 layout.tsx import { auth } from './routes'

标签： reactjs typescript react-router

【解决方案1】：

我最终做的是：

export const auth = new AuthService()

在 AuthService 文件中。同时我不会导出类型。

这样，任何需要身份验证服务的类都只需要从文件中导入实例，而不能创建另一个实例。

【讨论】：