如何在React中使用全局配置

Question

最近我正在学习ReactJS。

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

因此，当我向服务器请求Ajax的API（获取/发布）时，

我想在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中设置此结构吗？

Answer 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 );
}

Answer 2

如果使用create-react-app，则应使用.env变量。

1. 在您的根路径中添加.env文件，文件内容将如下所示： REACT_APP_SERVER_IP_ADDR = http://myapi.com REACT_APP_CUSTOM_VARIABLE = foobar

2. 然后在您的源代码中，可以像这样使用它： <select> <option value="1">1</option> <option selected value="2">2</option> </select>

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

Answer 3

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

您的config.js文件看起来像

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

，您可以像

一样导入

import config from './config';

config.url