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

Question

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

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

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

最好的方法是什么？

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

Answer 1

根据您的使用情况,您在此处至少有两个选项:

1. 像你提到的那样获取配置,在这些场景中我通常做的是data-attribute在我的根上放置一个将保存我的配置数据的服务器URL(在我的情况下,我不知道编译时服务器的域).
   即:<div id="root" data-url="yourDomain.com/app"></div>.
   获取此值并将其作为prop传递给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) );
   

2. 将配置数据存储到全局对象变量并在应用程序中使用它.

我喜欢第一个选项,即使它强迫你做一个ajax请求.