Tôi là người mới trên react.js Tôi đã triển khai một thành phần trong đó tôi đang tìm nạp dữ liệu từ máy chủ và sử dụng nó như,

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

Tôi muốn lưu trữ Url trong tệp cấu hình vì vậy khi tôi triển khai điều này trên máy chủ Thử nghiệm hoặc trên Sản xuất, tôi chỉ phải thay đổi url trên tệp cấu hình không phải trong tệp js nhưng tôi không biết cách sử dụng tệp cấu hình trong react.js

Bất cứ ai có thể vui lòng hướng dẫn tôi làm thế nào tôi có thể đạt được điều này?

Với webpack, bạn có thể đặt cấu hình dành riêng cho env-specific vào externalstrường trongwebpack.config.js

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

Nếu bạn muốn lưu trữ các cấu hình trong một tệp JSON riêng biệt, điều đó cũng có thể xảy ra, bạn có thể yêu cầu tệp đó và gán cho Config:

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

Sau đó, trong các mô-đun của bạn, bạn có thể sử dụng cấu hình:

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

Đối với React:

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

Không chắc liệu nó có phù hợp với trường hợp sử dụng của bạn hay không nhưng nó đang hoạt động khá tốt cho chúng tôi.

Nếu bạn đã sử dụng Tạo ứng dụng React, bạn có thể đặt một biến môi trường bằng tệp .env. Tài liệu ở đây:

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

Về cơ bản, hãy làm điều gì đó như thế này trong tệp .env ở gốc dự án.

REACT_APP_NOT_SECRET_CODE=abcdef

Bạn có thể truy cập nó từ thành phần của mình với

process.env.REACT_APP_NOT_SECRET_CODE

Bạn có thể sử dụng gói dotenv bất kể bạn sử dụng thiết lập nào. Nó cho phép bạn tạo .env trong gốc dự án của bạn và chỉ định các khóa của bạn như vậy

REACT_APP_SERVER_PORT=8000

Trong tệp mục nhập ứng dụng của bạn, bạn chỉ cần gọi dotenv (); trước khi truy cập các phím như vậy

process.env.REACT_APP_SERVER_PORT

Trong trường hợp bạn có tệp .properties hoặc tệp .ini

Trên thực tế, trong trường hợp nếu bạn có bất kỳ tệp nào có các cặp giá trị khóa như sau:

someKey=someValue
someOtherKey=someOtherValue

Bạn có thể nhập nó vào webpack bằng một mô-đun npm có tên là thuộc tính-reader

Tôi thấy điều này thực sự hữu ích vì tôi đang tích hợp phản ứng với khung công tác Java Spring, nơi đã có tệp application.properties. Điều này giúp tôi giữ tất cả các cấu hình cùng một nơi.

1. Nhập dữ liệu đó từ phần phụ thuộc trong package.json

"properties-reader": "0.0.16"

2. Nhập mô-đun này vào webpack.config.js ở trên cùng

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

3. Đọc tệp thuộc tính

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

4. Nhập hằng số này làm cấu hình

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

5. Sử dụng nó theo cách tương tự như đã đề cập trong câu trả lời được chấp nhận

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