Question

我有一个应用程序，我有一个导出功能。如果用户点击菜单'export'，我将在我的导出存储中调用一个函数并获取数据并将其导出到Excel文件中。我正在使用library 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));

当我阅读react loader库上的article时，我发现我们可以将组件包装到loader中：

import Loadable from 'react-loadable';

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

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

但在我的情况下，我想在我的商店加载该功能而不是整个组件。我怎么能实现这个目标呢？

反应延迟加载

0 个答案: