如何使用React-Loadable从多导出JS文件导入CustomButton

我来帮你搞定这个React-Loadable的导入问题！从你给出的代码片段来看，问题主要出在导出/导入的匹配逻辑以及React-Loadable的配置细节上，咱们一步步来修复：

一、先明确核心问题 #

你的代码存在两个关键卡点：

1. MyButton.js混合了ES模块导入和CommonJS导出，虽然能运行，但React-Loadable的loader需要明确处理导出结构
2. Home.js里的动态导入路径不完整，且没有正确从加载后的模块中提取目标组件/常量

二、修复步骤 #

1. 规范MyButton.js的导出（可选但推荐）

虽然CommonJS的module.exports也能工作，但统一用ES模块导出更符合React生态的规范：

// MyButton.js
import { CustomButton, BUTTON_STYLE, BUTTON_TYPE, BUTTON_SIZE, BUTTON_ALIGN, COLOR } from './buttons';
// 替换CommonJS导出为ES模块命名导出
export { CustomButton, BUTTON_STYLE, BUTTON_TYPE, BUTTON_SIZE, BUTTON_ALIGN, COLOR };

如果不想修改MyButton.js，后续loader里的逻辑也能兼容CommonJS导出，无需额外调整

2. 正确编写Home.js的React-Loadable配置

React-Loadable的核心是通过loader动态加载模块，再通过render函数提取需要的组件。以下是完整可运行的代码：

// Home.js
import React from 'react';
import Loadable from 'react-loadable';

// 先写一个简单的加载状态组件（必选，不然加载时会无反馈或报错）
const Loading = ({ error, retry }) => {
  if (error) {
    return <div>按钮加载失败，<button onClick={retry}>点击重试</button></div>;
  }
  return <div>按钮加载中...</div>;
};

// 配置异步加载的Button组件
const AsyncButton = Loadable({
  // 替换为你MyButton.js的正确相对路径
  loader: () => import('../../button/MyButton'),
  loading: Loading,
  // 从加载完成的模块中提取CustomButton
  render(loadedModule, props) {
    const { CustomButton } = loadedModule;
    return <CustomButton {...props} />;
  },
});

// 在Home组件中使用异步按钮
const Home = () => {
  return (
    <div className="home-container">
      <h1>首页</h1>
      {/* 直接像普通组件一样使用AsyncButton */}
      <AsyncButton 
        type={BUTTON_TYPE.PRIMARY} 
        size={BUTTON_SIZE.LARGE}
        style={BUTTON_STYLE.FILLED}
      >
        点击我
      </AsyncButton>
    </div>
  );
};

export default Home;

三、常见避坑提示 #

• 路径检查：确保import('../../button/MyButton')的路径是相对于Home.js的正确位置，别写错层级
• 依赖安装：确认已经安装了react-loadable：npm install react-loadable 或 yarn add react-loadable
• 动态import支持：如果你用Create React App、Webpack 4+或Vite，默认支持动态import，无需额外配置
• 常量加载：如果需要加载BUTTON_STYLE这类常量，可以在组件内部通过动态import单独获取，或者在render函数中一并提取

内容的提问来源于stack exchange，提问作者Midhun G S