如此处所述,在 react 库中使用 hooks 时,您经常会遇到 react 错误,指出hooks can only be called inside the body of a function component
此错误最可能的原因是您的库链接到它自己的 react 包,并且您的主应用程序也链接到,因此您最终使用了 react 包的 2 个不同副本。
此错误的一个典型解决方案是确保您的主应用程序和您的库使用完全相同的 react 包。
我使用的解决方案是:
- 光盘到
myMainApp/node_modules/react
yarn link
- 光盘到
myLib
yarn link react
此解决方案有效。我的主应用程序和我的库现在使用相同的反应包。
但是,如果我有多个主要应用程序怎么办?假设我有这样的项目结构:
使用 lib1-1 和 lib1-2 的主App1
使用 lib2-1 和 lib2-2 的主App2
两个主要应用程序彼此独立。所以 lib1-1 和 lib1-2 应该链接到 mainApp1 的 react 包,lib2-1 和 lib2-2 都应该链接到 mainApp2 的 react 包
我该怎么做?当我尝试在mainApp2/node_modules/react
中运行yarn link
时,yarn 告诉我已经有一个 react 的链接。
不幸的是,我不能使用yarn link as react2
或类似的东西。
关于如何克服这个问题的任何想法?
注意:这个问题可以通过构建你的库(其中 react 是一个 devDependency(,在每次调整后将你的更改提交到 git 而不是在你的主应用程序中升级库来克服。但当然,这不是一个解决方案,因为在开发过程中,您希望链接到您的库,而不是从存储库中重新导入它们
您可以全局安装 react 和 react-dom,然后将所有项目链接到全局实例。
该过程类似于您已经使用的过程,但创建指向全局位置的符号链接:
yarn global add react
yarn global add react-dom
然后,您可以从单个项目链接到它们。
如果你使用的是自定义 Webpack,那么你必须提到使用 React from 你的node_modules。
resolve: {
alias: {
react: path.resolve('./node_modules/react'),
},
}