React如何动态导入非默认导出的组件或函数？

React.lazy 本身要求导入的模块返回包含默认导出的 Promise，要导入非默认组件或函数，你可以在 import() 的回调里做一层包装，将非默认导出转为默认导出的形式，具体有两种常用方式：

方法一：直接在回调中重定向默认导出 #

如果要导入 myPath 里命名为 OtherComponent 的非默认组件，可直接修改 React.lazy 的回调逻辑：

const OtherComponent = React.lazy(() =>
  import('./myPath').then(module => ({ default: module.OtherComponent }))
);

之后就能像使用默认组件一样，通过 <OtherComponent /> 渲染该组件。

方法二：封装复用工具函数 #

如果需要多次导入不同的非默认组件，可以封装一个工具函数简化重复操作：

const lazyImport = (path, exportName) => {
  return React.lazy(() =>
    import(path).then(module => ({ default: module[exportName] }))
  );
};

// 使用示例：导入非默认组件
const OtherComponent = lazyImport('./myPath', 'OtherComponent');
// 使用示例：导入非默认工具函数（注：React.lazy更适合组件，普通函数可直接用import()）
const loadFormatDate = async () => {
  const { formatDate } = await import('./utils');
  formatDate(new Date());
};

注意：React.lazy 设计初衷是为组件的动态导入服务，如果只是动态导入普通工具函数，无需依赖 React.lazy，直接调用 import() 并解构获取对应函数即可。

内容的提问来源于stack exchange，提问作者Abhinand Shibu