2

我有一个应用程序，其中有一个导出功能。如果用户单击“导出”菜单，我将在导出存储中调用一个函数并获取数据并将其导出到 Excel 文件中。我正在使用库 XLSX进行导出，并且我想使用代码拆分来拥有延迟加载机制来加载此依赖项。

    import React, { Fragment } from 'react';
    import { connect } from 'react-redux';
    import { translate, Trans } from 'react-i18next';
    import { exportAccounts } from '../../store/export';
    import { Button, Menu, Dropdown } from 'antd';

    const mapDispatchToProps = dispatch => ({
      exportAccounts: translator => dispatch(exportAccounts(translator)),
    });

    class MyComponent extends React.Component {
     handleMenuOnClick = e => {
        switch (e.key) {
          case 'export':
            this.props.exportAccounts(this.props.t);
            break;
          default:
        }
      };
      options = (
        <Menu onClick={this.handleMenuOnClick}>
          <Menu.Item key="export">
            <Trans i18nKey="52918">Export</Trans>
          </Menu.Item>
        </Menu>
      );

      render = () => {
        const { isSettingVisible } = this.state;
        const { columnsToShow, t } = this.props;

        return (
            <Dropdown overlay={this.options} trigger={['click']}>
              <Button icon="ellipsis">
                <Trans i18nKey="-1">More Options</Trans>
              </Button>
            </Dropdown>
        );
    }
     export default connect( mapDispatchToProps)(translate()(MyComponent));

当我阅读有关反应加载器库的文章时，我看到我们可以将组件包装到加载器中：

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);

但就我而言，我想在我的商店中加载该功能，而不是整个组件。我怎样才能做到这一点？

4

0 回答 0