React 循环依赖项导入命名导出

Question

我有 2 个容器，都导入了一个名为 PageHeader 的组件，这是一个功能组件，并且像这样导入/导出......

（我导入的任何组件都会发生这种情况，而不仅仅是 PageHeader ）

components/PageHeader/PageHeader.jsx

import React from 'react';
import PropTypes from 'prop-types';

import './PageHeader.sass';

const PageHeader = ({ title, description, image }) => (
  <div className="section is-paddingless is-hidden-touch">
    <div className="header header__desktop" style={{ backgroundImage: `url('${image}')` }}>
      <h3 className="is-size-3 has-text-weight-semibold">{title}</h3>
      <h5>{description}</h5>
    </div>
  </div>
);

PageHeader.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
};

export default PageHeader;

components/PageHeader/index.js

import PageHeader from './PageHeader';
export default PageHeader;

在我的组件文件夹的根目录中，我有....

components/index.js

......
export { default as PageHeader } from './PageHeader';
......

这让我可以像这样将组件导入到容器中......

import { DelayedComponent, Loading, Page, PageHeader, ClientList, RecentlyViewed, ClientFilter } from '../../components';

当我只有 1 个容器时，它运行良好，我现在引入了第二个容器，这实际上是第二个页面。

我的容器如下......

containers/Clients/Clients.jsx

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

import { DelayedComponent, Loading, Page, PageHeader, ClientList, RecentlyViewed, ClientFilter } from '../../components';

import headerImage from '../../assets/images/client-search-banner.jpg';

class Clients extends Component {
  state = { selector: 'ALL' };

  static propTypes = {
    fetchClientListAction: PropTypes.func.isRequired,
    selectClientAction: PropTypes.func.isRequired,
    isLoading: PropTypes.bool.isRequired,
    clients: PropTypes.array.isRequired,
  };

  componentDidMount() {
    this.props.fetchClientListAction();
  }

  onClientSelect = client => this.props.selectClientAction(client);

  onFilterTenantList = selector => this.setState({ selector });

  render() {
    const { isLoading, clients } = this.props;
    const { selector } = this.state;

    if (isLoading)
      return (
        <DelayedComponent>
          <Loading />
        </DelayedComponent>
      );

    return (
      <Fragment>
        <PageHeader
          title="Choose a client"
          description="Bacon ipsum dolor amet ribeye biltong tongue, pig brisket venison fatback pork bacon kielbasa burgdoggen salami strip steak."
          image={headerImage}
        />
        <Page>
          <Page.Columns>
            <Page.Column modifiers="is-paddingless">
              <ClientFilter clients={clients} selector={selector} filterByLetter={this.onFilterTenantList} />
            </Page.Column>
          </Page.Columns>
          <Page.Columns modifiers="is-multiline">
            <Page.Column modifiers="is-two-thirds">
              <ClientList clients={clients} selector={selector} onClientSelect={this.onClientSelect} />
            </Page.Column>
            <Page.Column modifiers="is-one-third">
              <RecentlyViewed />
            </Page.Column>
          </Page.Columns>
        </Page>
      </Fragment>
    );
  }
}

export default Clients;

containers/EmployeeSearch/EmployeeSearch.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { PageHeader } from '../../components';

import headerImage from '../../assets/images/client-search-banner.jpg';

class EmployeeSearch extends Component {
  render() {
    return (
             <PageHeader
          title="Search"
          description="Bacon ipsum dolor amet ribeye biltong tongue, pig brisket venison fatback pork bacon kielbasa burgdoggen salami strip steak."
          image={headerImage}
        />
    );
  }
}

export default EmployeeSearch;

这样做会导致 Webpack 崩溃并出现以下错误...

/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/toposort/index.js:29
      throw new Error('Cyclic dependency: '+JSON.stringify(node))
                                                 ^

TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at visit (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/toposort/index.js:29:50)
    at visit (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/toposort/index.js:47:9)
    at visit (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/toposort/index.js:47:9)
    at Function.toposort [as array] (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/toposort/index.js:22:22)
    at Object.module.exports.dependency (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/html-webpack-plugin/lib/chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/html-webpack-plugin/index.js:364:35)
    at /Users/xxxxx/Code/xxxxx/search-webapp/node_modules/html-webpack-plugin/index.js:113:21
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/tapable/lib/Hook.js:35:21)
error An unexpected error occurred: "Command failed.

但是，如果我更改 EmployeeSearch.jsx 中的导入，它看起来像这样......

import PageHeader from '../../components/PageHeader';

有效。

我完全不知所措，希望能提供一些关于为什么/如何发生这种情况以及如何在不为组件添加多个导入语句的情况下解决此问题的意见。

我的容器呈现如下......

import React from 'react';
import Loadable from 'react-loadable';
import { Switch, Route } from 'react-router-dom';

import Loading from './components/Loading';

const AsyncRoute = loader =>
  Loadable({
    loader,
    loading: Loading,
    delay: 300,
  });

const Clients = AsyncRoute(() => import(/* webpackChunkName: "clients" */ './containers/Clients'));
const EmployeeSearch = AsyncRoute(() => import(/* webpackChunkName: "employee-search" */ './containers/EmployeeSearch'));

const Routes = () => (
  <Switch>
    <Route exact path="/" component={Clients} />
    <Route path="/employee-search/:client" component={EmployeeSearch} />
  </Switch>
);

export default Routes;

Answer 1

原来我在我的组件 index.js 文件中包含了 App。

我的路由封装在 App 中，所以这是我的循环依赖。