React懒加载动态组件导入：自定义文件夹优先、默认文件夹兜底及递归导入可行性问询

当然可以实现这种优先从custom文件夹加载组件，不存在则 fallback到default的逻辑，甚至不需要复杂的递归操作，我们可以通过封装一个Promise处理函数来轻松搞定。

核心思路 #

动态导入(import())返回的是一个Promise，我们可以利用这一点：先尝试加载custom目录下的目标组件，如果加载失败（比如文件不存在），就在catch回调里转而加载default目录下的对应组件。

封装加载函数 #

先写一个通用的组件加载函数，把逻辑抽离出来，方便复用：

const loadComponent = (componentName) => {
  // 先尝试从custom目录加载
  return import(`./components/custom/${componentName}`)
    .catch(() => {
      // 加载失败时，fallback到default目录
      return import(`./components/default/${componentName}`);
    });
};

在React组件中使用 #

接下来修改你的App组件，用这个封装好的函数来替代直接的动态导入：

function App() {
  const [componentFolder, setComponentFolder] = React.useState("default");
  
  // 使用封装的加载函数，这里以Home组件为例
  const Home = React.lazy(() => loadComponent("Home"));
  // 同理，其他组件也可以这样加载
  const ComponentThree = React.lazy(() => loadComponent("component-three"));

  return (
    <div className="App">
      <Suspense fallback="Loading...">
        <Home />
        <ComponentThree />
      </Suspense>
      {/* 可以加个按钮切换文件夹状态，测试逻辑 */}
      <button onClick={() => setComponentFolder(prev => prev === "default" ? "custom" : "default")}>
        切换组件目录
      </button>
    </div>
  );
}

逻辑验证 #

对应你的目录结构：

• 当加载component-three时，因为custom目录下存在该组件，会直接加载custom/component-three
• 当加载component-one时，custom目录下没有这个组件，会自动 fallback到default/component-one

注意事项 #

• 确保你的打包工具（比如Webpack）支持这种动态导入语法，React项目默认的create-react-app配置是支持的
• 组件名称要和文件目录里的名称完全匹配（包括大小写），否则会触发fallback逻辑
• Suspense组件的fallback最好提供友好的加载提示，提升用户体验

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