我在一个目录中有数百个小的 .json 文件，由于大小原因，我无法一次加载到内存中。因此，我想在组件安装后在 UI 中选择每个 .json 文件时单独加载它。所以我的问题很简单：有没有办法一次一个地动态导入这些 JSON 文件？
总结：
import '../myData/file1.json
...
import '../myData/file1000.json
将无法工作，因为我必须将其键入数百次，最终结果可能太大。不过，我很想知道您是否可以将文件目录递归导入 React 应用程序。
我希望有一个解决方案，例如：
fetch('../myData/${fileNumber}.json').then(() => ...
这将允许我指定我想要加载的确切文件，但从我所看到的情况来看，目前尚不清楚这是可能的。
是的，您可以在 reactjs 中实现这一点。这在开发模式下有效。要使其在生产中工作，您可能需要更改 jsons 的路径。
请按照以下步骤操作：
1）在公用文件夹中创建一个文件夹myData：App/public/
2）把你所有的json文件放在那里
3）在你的组件中这样使用它：
import React from 'react'
export default props => {
const [file, setFile] = React.useState(1)
React.useEffect(() => {
fetch('/myData/' + file + '.json', {mode: 'no-cors'})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
},[file])
return (
<div>
<div onClick={() => setFile(1)}>file 1</div>
<div onClick={() => setFile(2)}>file 2</div>
<div onClick={() => setFile(3)}>file 3</div>
</div>
)
}