React - неверный вызов ловушки. Uncaught Error: Minified React error # 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"
  }

• Did 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 hooks? Как react as peerDependencies работает в библиотеке и в приложении, где он используется?

Answer 1

Как я могу использовать несколько реагирующих приложений в одном реагирующем приложении?

Вы сделали это правильно. Каждое приложение реагирования упаковывается индивидуально, а затем импортируется там, где это необходимо.

Экспорт всего приложения реакции как отдельного компонента в виде библиотеки umd и использование его в другом приложении является правильным способом?

Это один из способов, да.

Как реагирует на работу peerDependencies в библиотеке и в приложении, где он используется?

peerDependencies позволяют вам указать, какая библиотека и версия должна быть уже установлена ​​до установки пакета.

Например, когда вы пишете это в пакете. json для заголовка

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

Вы говорите, что приложение-контейнер должно иметь react@16.12.0 для работы с заголовком. Такая же зависимость от одноранговых узлов должна быть добавлена ​​на панель мониторинга.

Как можно устранить эту ошибку реагирующих перехватчиков?

Поскольку вы не включили сообщение об ошибке, я Я предполагаю, что вы имеете в виду ошибку, где крюк не должен вызываться условно. Чтобы исправить эту ошибку, нам нужно минимальное воспроизведение вашего приложения, чтобы мы могли его протестировать. В вашем примере go не так много.