ฉันเป็นคนใหม่ใน 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 ที่ไม่ใช่ในไฟล์ js แต่ฉันไม่รู้วิธีใช้ไฟล์คอนฟิกูเรชันใน 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/...')

สำหรับการตอบสนอง:

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

คุณสามารถนำเข้าใน webpack โดยโมดูล npm ที่เรียกว่าproperties-reader

ฉันพบว่าสิ่งนี้มีประโยชน์มากเนื่องจากฉันกำลังรวม react กับ Java Spring framework ซึ่งมีไฟล์ application.properties อยู่แล้ว สิ่งนี้ช่วยให้ฉันเก็บ config ทั้งหมดไว้ด้วยกันในที่เดียว

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/...')