React hooks 复制 react 包

Question

如here所述，在反应库中使用钩子时，您经常会遇到反应错误 hooks can only be called inside the body of a function component 导致此错误的最可能原因是您的库 links 到它自己的 react 包和您的主应用程序，所以您最终使用了 2 个不同的 react 包副本。

此错误的一个典型解决方案是确保您的主应用程序和您的库使用完全相同的反应包。

我使用的解决方案是：

• cd 到 myMainApp/node_modules/react
• yarn link
• cd 到 myLib
• yarn link react

这个解决方案有效。我的主应用程序和我的库现在使用相同的反应包。

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

mainApp1 使用 lib1-1 和 lib1-2

mainApp2 使用 lib2-1 和 lib2-2

两个主要应用程序彼此独立。所以 lib1-1 和 lib1-2 应该 link 到 mainApp1 的反应包，而 lib2-1 和 lib2-2 应该 link 到 mainApp2 的反应包

我该怎么做？当我尝试在 mainApp2/node_modules/react 中 运行 yarn link 时，纱线告诉我已经有一个 link 用于反应。

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

关于如何克服这个问题有什么想法吗？

注意：这个问题可以通过构建你的库（其中 react 是一个 devDependency）来解决，每次调整后将你的更改提交到 git，然后在你的主应用程序中升级库。但是当然，这不是解决方案，因为在开发过程中，您希望 link 到您的库而不是从回购

重新导入它们

Answer 1

您可以全局安装 react 和 react-dom，然后 link 您所有的项目都安装到全局实例中。

该过程与您已经在使用的过程类似，但要为全球位置创建 symlinks：

yarn global add react
yarn global add react-dom

然后您可以从您的个人项目link给他们。

Answer 2

如果您使用的是自定义 Webpack，那么您必须提及使用来自 node_modules 的 React。

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