Javascript React-无效的钩子调用。未捕获错误：缩小的反应错误#321

我试图实现微型前端的概念。为此，我将有以下

react

应用程序

• 容器
• 标题
• 仪表板

所有三个都是个人申请<代码>标题和

仪表板

-我想在

容器

应用程序中使用它

对于

Header

app，它是一个简单的

react

功能组件。我在

webpack.config.js

中使用了以下内容

output: {
    path: path.join(__dirname, '/dist'),
    filename: 'header-bundle.js',
    library: 'TestHeader',
    libraryTarget: 'umd'
  },

在

package.json

中：

"main": "dist/header-bundle.js",
  "peerDependencies": {
    "react": "16.12.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.3",
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }

• Did

  npm链接

  来自

  标题

在

容器中

应用程序： -

npm链接头

在

App.js

容器的组件中：

import React from 'react';
import Header from 'header-app';

const App = props => {
  return (
    <div>
      <Header content="Header via container"></Header>
    </div>
  );
};

export default App;

我这里有几个问题：

• 如何在一个

  react

  应用程序中使用多个

  react

  应用程序？
• 将整个

  react

  应用程序作为单个组件导出为

  umd

  库并在另一个应用程序中使用是正确的方法吗？
• 如何解决

  react

  hooks的错误？

  如何反应
  作为
  对等依赖项
  在库和应用程序中使用它？

如何在一个react应用程序中使用多个react应用程序

你做得对。每个react应用程序都单独打包，然后导入到需要的地方

将整个react应用程序作为单个组件导出为umd库并在另一个应用程序中使用是正确的方法吗

这是一种方式，是的

peerDependencies在库和应用程序中的使用情况如何

peerDependencies

允许您在安装软件包之前声明应该安装的库和版本

例如，当您在package.json For标头中编写此文件时

  "peerDependencies": {
    "react": "16.12.0"
  },

您是说容器应用程序应该具有

react@16.12.0

以便使用收割台。 应将相同的对等依赖项添加到仪表板

如何解决react钩子的此错误

因为您没有包含错误消息，所以我假设您指的是不应该有条件地调用钩子的错误。为了修复该错误，我们需要对您的应用程序进行最小程度的复制，以便对其进行测试。在你的例子中没有太多的东西可供借鉴

  "peerDependencies": {
    "react": "16.12.0"
  },