在 React 中访问 JSON 文件而不导入它

Posted 2023-02-22

【中文标题】在 React 中访问 JSON 文件而不导入它

【英文标题】：Access JSON file in React without importing it

【发布时间】：2017-06-17 04:35:06

【问题描述】：

我一直在以JSON 文件的形式将数据导入到 React 组件中：

import data from '../../public/json/data.json';

我正在使用create-react-app 工具，当我运行npm run build 时，正如预期的那样，data.json 文件被捆绑为build/static/main.js 文件的一部分。

我希望这个data.json 文件不是 被捆绑，而是在每次组件运行时在运行时被引用。 IE。以便可以在构建的应用程序中对其进行编辑，并在应用程序中显示这些编辑。我认为通过将它包含在我的public（而不是src）文件夹中这将起作用，但当然我仍然是importing，所以它是捆绑的。有没有办法在不捆绑的情况下引用它？

【问题讨论】：

我认为这可以使用代码拆分来实现，您可以将代码拆分为按需加载的块。请参阅gist.github.com/gaearon/0a2213881b5d53973514、webpack.github.io/docs/code-splitting.html 了解更多信息。

【参考方案1】：

使用 fetch API 异步检索 JSON 文件。

查看https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 以获取示例实现。