如何在 React 或 create-react-app 中列出源文件夹内容?

IT技术 javascript reactjs create-react-app
2021-04-29 07:57:27

我正在使用create-react-app.

因为我可以这样做:

import LocalClass from "./localfolder/LocalClass.js"

甚至(使用动态导入):

import('./localfolder/LocalClass.js').then((module) => { /* ... */ })

有没有办法列出localfolder内容,以便我可以动态导入包含的文件?

列表应该在编译或捆绑时发生,而不是在运行时(我正在考虑自动菜单创建功能)。

该文件夹也可能包含普通类(即不是 React 组件);我想这是打包程序的问题,但我不确定。

2个回答

由于 CRA 在幕后使用 Webpack,您可以使用require.context()枚举给定路径中的所有可加载module。

虽然它是基于开放的,但经过一些调查

我找到了一个库:react-dynamic-import

用法:

const loader = f => import(`./dynamic/${f}.js`);
|_ dynamic
|  |_ realComponent-en.js
|  |_ realComponent-eu.js
|  |_ realComponent-kn.js
|_ container.js <-- working file

参考: