Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs IoC在不使用打字脚本的情况下进行反应_Reactjs_Ioc Container_Inversifyjs - Fatal编程技术网

Reactjs IoC在不使用打字脚本的情况下进行反应

Reactjs IoC在不使用打字脚本的情况下进行反应,reactjs,ioc-container,inversifyjs,Reactjs,Ioc Container,Inversifyjs,我对React非常陌生,我基本上有一个服务(一个实例),可以在多个React组件中注入和使用 到目前为止,我在谷歌搜索中遇到的选择是: 使用React的上下文,但不推荐使用,因为它是一个未记录的API 在道具中传递对象,从一个组件传递到另一个组件,但感觉有点不雅观和乏味 使用IoC容器,比如inversifyJS,看起来很棒,只是它依赖于typescript,我不想用typescript编写我的React应用程序 现在,Inversify显然可以在vanilla JS中使用,Inversif

我对React非常陌生,我基本上有一个服务(一个实例),可以在多个React组件中注入和使用

到目前为止,我在谷歌搜索中遇到的选择是:

  • 使用React的上下文,但不推荐使用,因为它是一个未记录的API
  • 在道具中传递对象,从一个组件传递到另一个组件,但感觉有点不雅观和乏味
  • 使用IoC容器,比如inversifyJS,看起来很棒,只是它依赖于typescript,我不想用typescript编写我的React应用程序
现在,Inversify显然可以在vanilla JS中使用,
Inversify vanillajs helpers
,但当我尝试在React中使用它来解析组件(我的
App
组件)时,它不断抛出一个异常声明

“ReactComponent中缺少必需的@injectable批注”

因此,我正试图找到一种方法来获取我的服务实例(使用它的少数组件共享同一个实例),或者通过使用React但不使用typescript的inversify工作,或者通过一种我尚未探索的新方法


有什么想法吗?

如果你不喜欢打字脚本,你可以做以下几件事:

首先,你需要这个方法

第二,这个方法对您来说可能太冗长了。为此,我们创建了一个名为的助手

第三,React不能很好地处理构造函数注入,所以我们创建了一个帮助器来促进惰性属性注入,名为


这三个工具应该可以引导您获得所需的结果:)

您可以创建高阶服务组件,然后用它包装React组件。不幸的是,inversify inject decorators似乎需要TypeScript。是否有vanillaJS版本的软件包?找不到。或者可能是一种使用装饰来为属性注入注释属性的方法?状态更新:我尝试使用
inversify vanillajs helpers
注释我的React组件,但由于它仍然不起作用,我尝试删除所有注入的依赖项(并调整调用
annotate
以反映这一点),我试图解析控制器(没有注入依赖项),但仍然有相同的消息:ReactComponent中缺少必需的@injectable注释。(请注意,如果我不调用annotate,我会收到一条类似的消息,但它提到的是
App
,而不是
ReactComponent
)如果我使用vanillajs helpers包对ReactComponent进行注释,然后我收到一条新的错误消息:派生类应用程序中的构造函数参数数必须大于等于其基类的构造函数参数数。您好,很抱歉回复太晚。。。你是对的,目前这是不受支持的。我建议您关闭此问题,因此我们将在GitHub上处理此问题,因为这是一个功能请求(不是问题)。您可以在以下位置遵循实施过程: