如何在React JSX中拥有外部JSON配置文件 [英] How to have a external JSON config file in react jsx
本文介绍了如何在React JSX中拥有外部JSON配置文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望在基于Reaction的项目中有一个外部配置文件(JSON)。这就是最终结果，或者当我交付它(公共文件夹和bundle.js)时，也应该给出我的配置文件。用户应该能够根据他或她的意愿更改配置，并使用我的应用程序。也就是说，无需重新编译我的代码，用户就应该能够使用它。换句话说，配置文件不应与我的应用捆绑在一起。
JSON
LikeJoseph Fehrman说，不用只考虑推荐答案，使用JS对我很有效。这就是我所做的。
我创建了一个名为Configurations.js的JS文件，其中包含我所需的配置
var configs = {
"aUrl": "https://localhost:9090/",
"bUrl": "https://localhost:9445/"};
然后我在index.html中添加了它。
<body>
<div id='root'></div>
<script src="configurations.js"></script>
<script src="dist/bundle.js"></script></body>
然后在webpack.config.js中，我将其添加到外部中，如下所示。(请注意，在configations.js中，变量名称为configs)。
externals: {
config: "configs",
}
import { Component } from 'react';
import axios from 'axios';
import Config from 'config';
/**
* @class GetProductAreas
* @extends {Component}
* @description Get ProductAreas
*/
class GetProductAreas extends Component {
/**
* @class GetProductAreas
* @extends {Component}
* @description get product areas
*/
getproductAreas() {
const url = Config.aUrl;
return axios.get(url).then((response) => {
return (response.data);
}).catch((error) => {
throw new Error(error);
});
}
}
export default (new GetProductAreas());
这篇关于如何在React JSX中拥有外部JSON配置文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
