Question

我正在尝试实施微前端概念。为此，我将拥有以下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的{{1}}

在Header应用中： -Container

在npm link Header的{{1}}组件中：

App.js

这很好。

但是当我添加使用Container的{{1}}组件时，我收到了有关无效钩子调用的错误消息。

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一样如何在使用它的库和应用程序中工作？

Answer 1

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

您这样做正确。每个react应用都单独打包，然后导入到需要的地方。

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

这是一种方法。

peerDependencies在库和使用它的应用程序中如何工作？

peerDependencies允许您说明在安装软件包之前应该已经安装了哪个库和版本。

例如，当您在package.json中为Header编写代码时

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

您是说Container应用程序应具有react@16.12.0才能使用Header。应该将相同的对等依赖项添加到仪表板。

如何解决反应挂钩的错误？

由于您未包含错误消息，因此我假设您是指不应有条件地调用钩子的错误。为了解决该错误，我们需要对您的应用程序进行最小程度的复制，以便我们对其进行测试。在您的示例中没有什么要解决的。

反应-无效的挂钩调用。未捕获的错误：最小化的React错误＃321

1 个答案: