Reactjs Can';无法让属性依赖项注入在React项目中工作
我需要以与C#或Java中类似的语法方式为react项目注入一些真正基本的依赖项。通过道具使用上下文或注入不是一个选项。到目前为止,我尝试了三种解决方案:Reactjs Can';无法让属性依赖项注入在React项目中工作,reactjs,typescript,dependency-injection,inversifyjs,Reactjs,Typescript,Dependency Injection,Inversifyjs,我需要以与C#或Java中类似的语法方式为react项目注入一些真正基本的依赖项。通过道具使用上下文或注入不是一个选项。到目前为止,我尝试了三种解决方案: 但是,这些解决方案都不起作用,如果存在某种配置问题,就会产生问题 使用Inversify/Inversify React Decorators/Rect.DI SomeService.ts import { inject, injectable } from "inversify"; import { TYPES
import { inject, injectable } from "inversify";
import { TYPES, ITokenProvider, IFileService } from "../injectables";
import { lazyInject, DIContainer } from "../inversify.config";
export class SomeService {
@inject(TYPES.ITokenProvider) private tokenProvider!: ITokenProvider; //Inversify
//@lazyInject(TYPES.ITokenProvider) private tokenProvider!: ITokenProvider;//Inversify-r-d
//@Inject tokenProvider!: TokenProvider; //react-di
(...)
}
inversify.config.ts
import "reflect-metadata";
import { Container } from "inversify";
import getDecorators from "inversify-inject-decorators";
import { TYPES, ITokenProvider, } from "./injectables";
import { TokenProvider } from "./Services/TokenProvider"
const DIContainer = new Container();
DIContainer.bind<ITokenProvider>(TYPES.ITokenProvider).toConstructor(TokenProvider);
const { lazyInject } = getDecorators(DIContainer, false);
export { DIContainer, lazyInject }
错误
React DI和Inversify不会解析依赖项,从而导致属性出现未定义的错误。
Inversify decorators导致以下错误:
TokenProvider.ts:8 Uncaught ReferenceError: Cannot access 'SomeService' before initialization
at Module.SomeService (VM8 main.chunk.js:248)
at Module../src/inversify.config.ts (inversify.config.ts:11)
(...)
配置
tsconfig.json
{
"include": [
"src/*"
],
"compilerOptions": {
"target": "es5",
"jsx": "react",
"allowSyntheticDefaultImports": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"types": [ "reflect-metadata" ]
}
}
我还尝试在不同的类中移动“reflect metadata”
@Module({
providers: [
{ provide: AccessTokenProvider, useClass: AccessTokenProvider },
]
})
TokenProvider.ts:8 Uncaught ReferenceError: Cannot access 'SomeService' before initialization
at Module.SomeService (VM8 main.chunk.js:248)
at Module../src/inversify.config.ts (inversify.config.ts:11)
(...)
{
"include": [
"src/*"
],
"compilerOptions": {
"target": "es5",
"jsx": "react",
"allowSyntheticDefaultImports": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"types": [ "reflect-metadata" ]
}
}