React 钩子重复的 React 包

IT技术 reactjs react-hooks yarnpkg
2021-05-05 20:51:57

如上所述这里，在使用钩子时react库中，你经常会遇到一个react错误，说hooks can only be called inside the body of a function component 此错误的最可能的原因是你的库链接到自己的react包，你主要的应用程序也，所以你最终使用2个不同的副本react包。

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

我使用的解决方案是：

  • 光盘到 myMainApp/node_modules/react
  • yarn link
  • 光盘到 myLib
  • yarn link react

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

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

mainApp1 使用 lib1-1 和 lib1-2

mainApp2 使用 lib2-1 和 lib2-2

两个主要应用程序彼此独立。所以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，然后在你的主应用程序中升级库。但是当然，这不是解决方案，因为在开发过程中，您希望链接到您的库，而不是从 repo 的重新导入它们

2个回答

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

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

yarn global add react
yarn global add react-dom

然后您可以从您的个人项目链接到它们。

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

resolve: {
    alias: {
        react: path.resolve('./node_modules/react'),
    },
}
其它你可能感兴趣的问题
上一篇从外部 JavaScript 函数调用 react 组件的函数 下一篇React Router 和任意查询参数：页面在加载时意外刷新？