我是React.js的新手，我实现了一个组件，在其中我从服务器获取数据并像这样使用它，

CallEnterprise:function(TenantId){


    fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) 
    {
        EnterprisePerspectiveActions.getEnterprise(enterprises);
    }).catch(function()
    {
        alert("There was some issue in API Call please contact Admin");
        //ComponentAppDispatcher.handleViewAction({
        //    actionType: MetaItemConstants.RECEIVE_ERROR,
        //    error: 'There was a problem getting the enterprises'
        //});
    });
},

我想将Url存储在配置文件中，所以当我在测试服务器或生产环境中部署Url时，我只需要更改config文件中的url（而不是js文件中的URL），但是我不知道如何在react.js中使用配置文件

谁能指导我如何实现这一目标？

使用webpack，您可以将env特定的配置放入以下externals字段中webpack.config.js

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

如果要将配置存储在单独的JSON文件中，也可以这样做，则可以要求该文件并分配给Config：

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

然后在您的模块中，可以使用config：

var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')

对于React：

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

不知道它是否涵盖了您的用例，但对于我们来说它一直工作得很好。

如果使用了Create React App，则可以使用.env文件设置环境变量。文档在这里：

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

基本上，在项目根目录的.env文件中执行类似的操作。

REACT_APP_NOT_SECRET_CODE=abcdef

您可以使用以下命令从组件中访问它

process.env.REACT_APP_NOT_SECRET_CODE

无论使用哪种设置，都可以使用dotenv软件包。它允许您在项目根目录中创建.env并指定密钥，如下所示

REACT_APP_SERVER_PORT=8000

在应用程序入口文件中，只需调用dotenv（）;。在像这样访问密钥之前

process.env.REACT_APP_SERVER_PORT

如果您有.properties文件或.ini文件

实际上，如果您有任何文件具有这样的键值对：

someKey=someValue
someOtherKey=someOtherValue

您可以通过一个名为properties-reader的npm模块将其导入到webpack中

我发现这非常有用，因为我正在与Java Spring框架集成反应，该框架已经有一个application.properties文件。这有助于我将所有配置放在一个地方。

1. 从package.json中的依赖项部分导入

"properties-reader": "0.0.16"

2. 将此模块导入顶部的webpack.config.js

const PropertiesReader = require('properties-reader');

3. 读取属性文件

const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;

4. 将此常量作为配置导入

externals: { 'Config': JSON.stringify(appProperties) }

5. 以与接受答案相同的方式使用它

var Config = require('Config') fetchData(Config.serverUrl + '/Enterprises/...')