如何在反应中使用全局配置答案

【问题标题】：How to use global configuraion in react如何在反应中使用全局配置
【发布时间】：2019-06-14 15:06:48
【问题描述】：

最近在学习 ReactJS。

我想设置一个全局配置变量，例如 SERVER_IP_ADDR。

所以，当我向服务器请求 API（获取/发布）作为 Ajax 时，

我想在 ReactJS 中使用这个全局配置变量。

我通常在 JavaScript 中创建一个全局变量，

只需将其导入并在任何地方使用。

/js/config.js

var SERVER_IP_ADDR

/js/main.js

<script src="/js.config.js"></script>

像这样

<script>
  function request() {
    url = SERVER_IP_ADDR;
  }

</script>

我不能在 ReactJS 中设置这个结构吗？

【问题讨论】：

虽然可以做你想做的事，但我建议你研究一下dotenv 和this question，了解如何在 React 项目中使用 dotenv 环境变量。如果您使用的是create-react-app，那么您也可以查看here

【解决方案1】：

您可以导出配置对象并将其导入到您需要的任何位置。

js.config.js

const config = {
  SERVER_IP_ADDR: '...',
  OTHER_CONFIG_KEY: '...'
}

export default config;

在你需要的文件中

import configuration from "./js.config"

function request(){
   fetch( configuration.SERVER_IP_ADDR );
}

【讨论】：

【解决方案2】：

如果你使用create-react-app，你应该使用 .env 变量来做这样的事情。

在根路径下添加 .env 文件，文件内容如下： REACT_APP_SERVER_IP_ADDR=http://myapi.com REACT_APP_CUSTOM_VARIABLE=foobar
然后在您的源代码中，您可以像这样使用它： ${process.env.REACT_APP_SERVER_IP_ADDR}/v1/user

关于 .env 的更多信息：.env

【讨论】：

【解决方案3】：

是的，您可以使用 config.js 文件并在多个地方使用它。

你的 config.js 文件看起来像

module.exports={
  url : 'api.xxx.com'
}

你可以像这样导入它

import config from './config';

config.url

【讨论】：