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

Question

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

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

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

最好的方法是什么？

我已经使用 Fetch API(加载文件的 http 请求)完成了这项工作，但也许有更好的方法来做到这一点。

Answer 1

根据您的用例，这里至少有 2 个选项:

1. 像您提到的那样获取配置。我通常在这些方面做什么场景放了一个data-attribute在我的根服务器 url它将保存我的配置数据(在我的情况下我不知道域服务器在编译时)。

即:<div id="root" data-url="yourDomain.com/app"></div> .

获取这个值并传递它 作为应用程序的 Prop 。 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) );

1. 将配置数据存储到一个全局对象变量中并在内部使用它你的应用。

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