Question

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

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

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

最好的方法是什么？

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

Answer 1

根据您的使用情况，此处至少有2个选项：

像你提到的那样获取配置。我通常在这些方面做些什么使用服务器URL在我的根上放置data-attribute个方案这将保存我的配置数据（在我的情况下，我不知道域名编译时的服务器）。

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

抓住这个值并传递它作为App的支柱。例如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) );

将配置数据存储到全局对象变量并在其中使用你的应用。

我更喜欢第一个选项，即使它强迫你做一个ajax请求。

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

1 个答案: