React钩子重复的react包

Question

如here所述，在React库中使用钩子时，您经常会遇到反应错误，提示hooks can only be called inside the body of a function component 导致此错误的最可能原因是您的库链接到其自己的react软件包，而且您的主应用程序也链接到该应用程序，因此您最终使用了react软件包的2个不同副本。

对此错误的一种典型解决方案是确保您的主应用和您的库使用完全相同的react软件包。

我使用的解决方案是：

• 从CD转到myMainApp/node_modules/react
• yarn link
• 从CD转到myLib
• yarn link react

此解决方案有效。我的主应用程序和库现在使用相同的react软件包。

但是，如果我有多个主要应用程序怎么办？假设我有这个项目结构：

使用lib1-1和lib1-2的mainApp1

使用lib2-1和lib2-2的mainApp2

两个主要应用程序彼此独立。因此lib1-1和lib1-2应该链接到mainApp1的react软件包，而lib2-1和lib2-2应该都链接到mainApp2的react软件包

我该怎么做？当我尝试在yarn link中运行mainApp2/node_modules/react时，yarn告诉我已经有一个react链接。

不幸的是，我不能使用yarn link as react2或类似的东西。

关于如何克服这一点的任何想法？

注意：可以通过构建库（其中react是devDependency），在每次调整后将更改提交到git以及在主应用程序中升级库来解决此问题。但是当然，这不是解决方案，因为在开发过程中，您希望链接到库，而不是从存储库中重新导入它们。

Answer 1

您可以全局安装react和react-dom，然后将所有项目链接到全局实例。

该过程与您已经在使用的过程类似，但是会创建指向全局位置的符号链接：

yarn global add react
yarn global add react-dom

然后，您可以从各个项目链接到它们。

Answer 2

如果您使用的是自定义 Webpack，则必须提及使用来自 node_modules 的 react。

resolve: {
    alias: {
        react: path.resolve('./node_modules/react'),
    },
}