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

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"
  }

• 从Header 做了npm link

在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;

这很好用。

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

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 钩子的这个错误？ react as peerDependencies 如何在库和使用它的应用程序中工作？

Answer 1

如何在一个 React 应用中使用多个 React 应用？

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

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

这是一种方式。

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

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

例如当你在 package.json 中为 Header 写这个时

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

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

如何解决这个 react hooks 的错误？

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