我正在尝试实施微前端概念。为此，我将有以下react应用程序。

• 容器
• 标题
• 仪表板

所有 3 个都是单独的应用程序。Header并且Dashboard- 我想在Container应用程序中使用它。

对于Header应用程序，它是一个简单的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"
  }

• 难道npm link从Header

在Container应用程序中： -npm link Header

在 的App.js组成部分Container：

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

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

export default App;

这工作正常。

但是当我添加Dashboard使用 的组件时react hooks，我收到关于无效钩子调用的错误。

Dashboard应用程序也有react作为peerDependencies。单独的Dashboard应用程序工作正常。

Dashboard 零件：

import React, { useState, useEffect } from 'react';
import NoIcon from './no_icon.png';

const Card = props => {
  return (
    <div style={{ margin: '1em' }}>
      <img alt="avatar" style={{ width: '70px' }} src={NoIcon} />
      <div>
        <div style={{ fontWeight: 'bold' }}>{props.label}</div>
      </div>
    </div>
  );
};

const CardList = props => {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, auto)'
      }}
    >
      {props.cards.map(card => (
        <Card {...card} key={card.id} />
      ))}
    </div>
  );
};

const Dashboard = props => {
  // const { apps } = props;
  const [hasError, setErrors] = useState(false);
  const [apps, setApps] = useState([]);

  async function fetchData() {
    const res = await fetch('src/data.json');
    res
      .json()
      .then(res => setApps(res))
      .catch(err => setErrors(err));
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      <CardList cards={apps} />
    </div>
  );
};

export default Dashboard;

我在这里有几个问题：

• 如何react在一个react应用程序中使用多个应用程序？
• 将整个react应用程序作为单个组件导出为umd库并在另一个应用程序中使用它是正确的方法吗？
• 我该如何解决这个react钩子错误？reactaspeerDependencies在库和使用它的应用程序中如何工作？