reactjs - 反应惰性递归导入

Question

我有需要从动态文件夹加载组件的要求。例如，我在组件中有以下文件夹

components  
    -default
        -component-one
        -component-two
        -component-three
    -custom
        -component-three

假设如果componentFolder state设置为custom文件夹，那么它应该从.custom folder如果没有找到任何组件，custom folder那么它应该从default文件夹加载。所以我的问题是，我们可以递归导入吗？

 function App() {
 
const [componentFolder, setComponentFolder] = React.useState("default")

const Home = React.lazy(() => import("./components/" +componentFolder+ "/Home"));
  return (
    <div className="App">
      <Suspense fallback="laoding">
        <Home></Home>
      
      </Suspense>

    </div>
  );
}

以下链接与我询问的要求相同 如何检查reactjs中是否存在特定文件

标签： reactjsreact-hooksreact-lazy-load

Answer 1

如果您使用的是 Webpack，那么您可以使用require.context动态加载模块：

import React, { Suspense } from "react";

const load = async (path, file) => {
  const defaultPath = "default";
  const files = require.context("./components", true, /\.js$/);
  try {
    return files(`./${path}/${file}.js`);
  } catch (err) {
    return files(`./${defaultPath}/${file}.js`);
  }
};

export default function App() {
  const [componentFolder, setComponentFolder] = React.useState("default");
  const Home = React.lazy(() => load(componentFolder, "Home"));
  return (
    <div className="App">
      <Suspense fallback="loading">
        <Home />
      </Suspense>
    </div>
  );
}