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

【问题标题】：How can i load a JSON configuration in runtime in a React app?如何在 React 应用程序的运行时加载 JSON 配置？
【发布时间】：2018-02-20 18:43:21
【问题描述】：

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

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

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

最好的方法是什么？

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

【问题讨论】：

fetch 可以达到这个目的。
@Renée 但是这样做的正确方法是什么？我的意思是，在 React 应用程序中加载设置的正确方法是通过 http 调用来获取文件？
如果可能，最好将设置注入服务器端的<script> 标记并在您的应用程序中读取。这样，您可以保存 HTTP 请求并加快加载速度。但是，在 100% 静态应用程序中，这是不可能的。对于 100% 静态应用程序，您需要某种形式的 HTTP 请求。

标签： javascript json reactjs

【解决方案1】：

根据您的用例，您至少有 2 个选项：

获取您提到的配置。我通常在这些使用服务器 url 在我的根目录上放置一个 data-attribute 这将保存我的配置数据（在我的情况下，我不知道域编译时的服务器）。

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

获取这个值并传递它作为应用程序的道具。 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 请求。

【讨论】：

我采用了类似的方法，但从公共获取了一个物理文件。这允许我的 CI/CD 解决方案对文件进行配置转换。
@MichielCornille “从公共获取物理文件”是什么意思？