React 组件模块（从本地 repo 导入）导致错误“只能在 function 组件的主体内部调用 Hooks。”

Question

我创建了一个反应组件模块并将该模块导入到 webpack 项目中。

我目前正在从本地存储库中导入组件：

npm install ~/git/repo-name

我这样做是因为将模块重新上传到 npm 以测试每一个微小的变化是不可行的。

组件模块将 react 和 react-dom 列为 package.json 中的对等依赖项，您可以在此处查看：

{

  ...(name, version,etc)...

  "devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0"
  },
  "dependencies": {
    "core-js": "^3.19.2",
    "regenerator-runtime": "^0.13.9"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

我找到了这个 stackoverflow question ，列出的第一个答案听起来像票。 但是，在 npm 将 node_modules 中组件的react 和 react-dom 文件夹链接到 webpack 项目的 node_modules 目录中的相同文件夹后，我仍然收到错误消息。

当我编译组件模块时，我能够将错误跟踪到 babel 发出的修改代码中的特定行：

  var availableNetworkOptions = (0, _react.useRef)(null);

我不理解这种语法，但我可以推断它是 babel 如何在我的 original.js 文件中转换我对“useRef”的使用的一部分（或者至少它是如何尝试这样做的）。 我不禁想知道这种奇怪的语法是否与错误有关。 这似乎不太可能——我相信 babel 知道它在做什么。 另一方面，我似乎已经排除了似乎是这个问题的更常见原因之一的“重复反应”问题，或者至少据我所知我已经这样做了。

Answer 1

您不能在组件外部使用钩子，重构它并将其转换为 function 或在功能或 class 基础组件中使用它们

Answer 2

实际上，问题在于，由于本地组件模块和使用它的项目都安装了 react ，因此存在多个 react 副本。 我链接到的解决方案（请参阅第一个答案）不起作用，因为我没有正确遵循指示。

这些方向是：

Below are the steps I followed :
1. In Your Application:
a) cd node_modules/react && npm link
b) cd node_modules/react-dom && npm link

2. In Your Library
a) npm link react
b) npm link react-dom

3)Stop your dev-server and do `npm start` again.

相反，对于第 2 步，我正在执行以下操作：

(in library)
cd node_modules/react && npm link react
cd ../react-dom && npm link react-dom