Javascript 如何在React应用程序的运行时加载JSON配置？

我有一个React应用程序（带有静态内容，不使用Node.js），我需要加载一个配置文件（JSON）

文件加载需要在运行时进行，因为配置需要具有与承载应用程序的服务器相关的不同数据

由于这最后一个要求，我无法使用例如webpack externals加载该文件，因为应用程序在更新JSON文件时不会更新配置

最好的方法是什么

---

我已经使用Fetch API（加载文件的http请求）完成了这项工作，但可能有更好的方法来完成这项工作。

根据您的使用情况，这里至少有两个选项：

获取您提到的配置。我通常在这里做什么 场景在我的根目录上放置一个带有服务器url的

数据属性

这将保存我的配置数据（在我的情况下，我不知道域） （在编译时为服务器的名称） i、 e:

获取此值并传递它 作为应用程序中的道具

index.js

例如：

    const root = document.getElementById('root');
    const url = root.getAttribute('data-url');
    const configPromise = fetch(url);
    configPromise.then((res) => res.json())
      .then(config => render(<App config={config} />, root) );

const root=document.getElementById（'root'）；
const url=root.getAttribute（'data-url'）；
const configPromise=fetch（url）；
configPromise.then（（res）=>res.json（））
.then（config=>render（，root））；

将配置数据存储到全局对象变量中，并在内部使用它 你的应用程序

---

我更喜欢第一个选项，尽管它迫使您执行ajax请求。

fetch

可以满足这一目的。@rene但是这样做正确吗？我的意思是，在React应用程序中加载设置的正确方法是通过http调用获取文件？如果可能，最好将设置插入服务器端的

标记中，并在应用程序中读取。这样，您可以保存HTTP请求并更快地加载。但在100%静态应用程序中，这是不可能的。对于100%静态应用程序，您需要某种形式的HTTP请求。我采用了类似的方法，但从public获取了一个物理文件。这允许我的CI/CD解决方案对文件进行配置转换。