没有打字稿的 React 中的 IoC

Question

我对 React 还是很陌生，我基本上会有一个服务（一个单一实例），我可以以某种方式注入并在多个 React 组件中使用它。

到目前为止，我通过谷歌搜索遇到的选项是：

• 使用 React 的上下文，但不建议这样做，因为它是一个未记录的 API。
• 在 props 中传递对象，从一个组件到另一个组件，但感觉有点不雅和乏味
• 使用 IoC 容器，例如 inversifyJS，看起来很棒，只是它依赖于 typescript，我不希望在 typescript 中编写我的 React 应用程序。

现在，Inversify 显然可以在原版 JS 中使用 inversify-vanillajs-helpers，但是当我尝试在 React 中使用它来解析组件（我的 App 组件）时，它一直抛出异常声明

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

所以，我试图找出一种方法来获取我的服务实例（在使用它的少数组件之间共享相同的实例），或者通过使用 React 但不使用打字稿使 inversify 工作，或者使用新方法我还没有探索。

有什么想法吗？

Answer 1

如果你不喜欢 TypeScript，你可以做一些事情：

首先，您需要inversify.decorate 方法。

其次，这种方法对您来说可能过于冗长。为此，我们创建了一个名为 inversify-vanillajs-helpers 的助手。

第三，React 不能很好地处理构造函数注入，因此我们创建了一个辅助函数来促进惰性属性注入，称为 inversify-inject-decorators。

这三个工具应该会引导你达到预期的结果:)