Ich bin neu bei react.js. Ich habe eine Komponente implementiert, in der ich die Daten vom Server abrufe und wie folgt verwende:

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'
        //});
    });
},

Ich möchte die URL in der Konfigurationsdatei speichern. Wenn ich diese auf dem Testserver oder in der Produktion bereitstelle, muss ich nur die URL der Konfigurationsdatei ändern, nicht in der js-Datei, aber ich weiß nicht, wie die Konfigurationsdatei in react.js verwendet wird

Kann mich bitte jemand anleiten, wie ich das erreichen kann?

Mit Webpack können Sie env-spezifische Konfiguration in das externalsFeld in setzenwebpack.config.js

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

Wenn Sie die Konfigurationen in einer separaten JSON-Datei speichern möchten, können Sie diese Datei auch anfordern und zuweisen Config:

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

Dann können Sie in Ihren Modulen die Konfiguration verwenden:

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

Für die Reaktion:

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

Ich bin mir nicht sicher, ob es Ihren Anwendungsfall abdeckt, aber es hat bei uns ziemlich gut funktioniert.

Wenn Sie Create React App verwendet haben, können Sie eine Umgebungsvariable mithilfe einer ENV-Datei festlegen. Die Dokumentation finden Sie hier:

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

Grundsätzlich machen Sie so etwas in der .env-Datei im Projektstamm.

REACT_APP_NOT_SECRET_CODE=abcdef

Sie können von Ihrer Komponente aus mit darauf zugreifen

process.env.REACT_APP_NOT_SECRET_CODE

Sie können das dotenv-Paket verwenden, unabhängig davon, welches Setup Sie verwenden. Sie können eine .env-Datei in Ihrem Projektstamm erstellen und Ihre Schlüssel wie folgt angeben

REACT_APP_SERVER_PORT=8000

Rufen Sie in Ihrer Anwendungseintragsdatei einfach dotenv () auf. bevor Sie wie folgt auf die Schlüssel zugreifen

process.env.REACT_APP_SERVER_PORT

Falls Sie eine .properties-Datei oder eine .ini-Datei haben

Eigentlich für den Fall, dass Sie eine Datei mit Schlüsselwertpaaren wie diesen haben:

someKey=someValue
someOtherKey=someOtherValue

Sie können dies über ein npm-Modul namens in webpack importieren Properties-Reader

Ich fand das sehr hilfreich, da ich React in Java Spring Framework integriere, wo es bereits eine application.properties-Datei gibt. Dies hilft mir, alle Konfigurationen an einem Ort zusammenzuhalten.

1. Importieren Sie das aus dem Abschnitt "Abhängigkeiten" in package.json

"properties-reader": "0.0.16"

2. Importieren Sie dieses Modul oben in webpack.config.js

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

3. Lesen Sie die Eigenschaftendatei

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

4. Importieren Sie diese Konstante als Konfiguration

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

5. Verwenden Sie es genauso wie in der akzeptierten Antwort angegeben

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