Я новачок у реагуванні .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-адресу у файлі конфігурації не у файлі js, але я не знаю, як використовувати файл конфігурації у React.js

Хто-небудь може підказати мені, як я можу цього досягти?

За допомогою webpack ви можете додати в externalsполе конфігурацію, що стосується envwebpack.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'))
}

Потім у своїх модулях ви можете використовувати конфігурацію:

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

Ви можете імпортувати це у веб-пакет за допомогою модуля npm, який називається properties-reader

Я знайшов це дійсно корисним, оскільки інтегрую реакцію з фреймворком 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. Імпортуйте цю константу як config

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

5. Використовуйте його так само, як зазначено у прийнятій відповіді

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