कैसे प्रतिक्रिया में एक वैश्विक चर घोषित करने के लिए?

Question 1

मैंने i18nएक घटक (ऐप में लोड होने वाला पहला घटक) में एक बार अनुवाद ऑब्जेक्ट को इनिशियलाइज़ किया । एक ही वस्तु की आवश्यकता है अन्य सभी घटकों में। मैं इसे हर घटक में फिर से शुरू नहीं करना चाहता। क्या रास्ता है? इसे विंडो स्कोप के लिए उपलब्ध कराने से मुझे मदद नहीं मिलती क्योंकि मुझे इसे render()विधि में उपयोग करने की आवश्यकता है ।

कृपया इन समस्या के लिए एक सामान्य समाधान सुझाएं और i18n विशिष्ट समाधान न करें।

Question 2

आप प्रसंग का उपयोग करने की कोशिश क्यों नहीं करते ?

आप किसी भी मूल घटक में एक वैश्विक संदर्भ चर घोषित कर सकते हैं और यह चर घटक ट्री के द्वारा सुलभ होगा this.context.varname। आपको केवल मूल घटक में और उसके बाद निर्दिष्ट करना है childContextTypesऔर getChildContextउसके बाद आप किसी भी घटक से contextTypesबाल घटक में निर्दिष्ट करके इसका उपयोग / संशोधित कर सकते हैं ।

हालाँकि, डॉक्स में उल्लिखित इस पर ध्यान दें:

जैसे स्पष्ट कोड लिखते समय वैश्विक चर सबसे बेहतर होते हैं, वैसे ही आपको ज्यादातर मामलों में संदर्भ का उपयोग करने से बचना चाहिए। विशेष रूप से, "टाइपिंग को बचाने" का उपयोग करने से पहले दो बार सोचें और स्पष्ट प्रॉपर पास करने के बजाय इसका उपयोग करें।

Question 3

प्रतिक्रिया से परे

आप शायद इस बात से अवगत नहीं होंगे कि आयात पहले से ही वैश्विक है । यदि आप किसी वस्तु (सिंगलटन) को निर्यात करते हैं तो यह विश्व स्तर पर आयात विवरण के रूप में सुलभ है और इसे विश्व स्तर पर संशोधित भी किया जा सकता है ।

यदि आप विश्व स्तर पर किसी चीज़ को शुरू करना चाहते हैं, लेकिन एक ही बार संशोधित करना सुनिश्चित करते हैं, तो आप इस सिंगलटन दृष्टिकोण का उपयोग कर सकते हैं जिसमें शुरू में परिवर्तनीय गुण होते हैं लेकिन फिर आप अपने इनिट परिदृश्य में Object.freezeइसकी अपरिवर्तनीयता सुनिश्चित करने के लिए इसके पहले उपयोग के बाद उपयोग कर सकते हैं ।

const myInitObject = {}
export default myInitObject

फिर आपके init मेथड को रेफर करते हुए:

import myInitObject from './myInitObject'
myInitObject.someProp = 'i am about to get cold'
Object.freeze(myInitObject)

myInitObjectअभी भी वैश्विक हो जाएगा के रूप में यह कहीं भी संदर्भित किया जा सकता एक आयात के रूप में लेकिन जमे हुए रहते हैं और किसी को भी प्रयास यह संशोधित करने के लिए करता है, तो फेंक देते हैं।

यदि प्रतिक्रिया-निर्माण-एप्लिकेशन का उपयोग कर रहे हैं

(मैं वास्तव में क्या देख रहा था) इस परिदृश्य में आप पर्यावरण चर को संदर्भित करते हुए वैश्विक वस्तुओं को सफाई से आरंभ कर सकते हैं।

आपके प्रोजेक्ट के मूल में .env फ़ाइल बनाना उपसर्गीयREACT_APP_ चर के साथ अंदर काफी अच्छी तरह से करता है। आप अपने जेएस और जेएसएक्स के भीतर संदर्भ ले सकते हैं, process.env.REACT_APP_SOME_VARजैसा कि आपको आवश्यकता है और यह डिजाइन द्वारा अपरिवर्तनीय है।

यह window.myVar = %REACT_APP_MY_VAR%HTML में सेट होने से बचा जाता है ।

सीधे फेसबुक से इसके बारे में अधिक उपयोगी विवरण देखें:

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

Question 4

अनुशंसित नहीं है लेकिन .... आप अपने ग्लोबल वैरिएबल को जोड़ने के लिए अपने ऐप क्लास से कंपोनेंटवैलमाउंट का उपयोग कर सकते हैं ... इसे थोड़ा सा पसंद करें:

componentWillMount: function () {
    window.MyVars = {
        ajax: require('../helpers/ajax.jsx'),
        utils: require('../helpers/utils.jsx')
    };
}

अभी भी इसे हैक मानें ... लेकिन इससे आपका काम हो जाएगा

btw ComponentsWillMount रेंडर करने से पहले एक बार निष्पादित होता है, यहाँ और अधिक देखें: https://reactjs.org/docs/react-component.html#mounting-componentwillmount

Question 5

इस सामग्री के साथ .src फ़ोल्डर में "config.js" नामक एक फ़ाइल बनाएँ:

module.exports = global.config = {
    i18n: {
        welcome: {
            en: "Welcome",
            fa: "خوش آمدید"
        }
        // rest of your translation object
    }
    // other global config variables you wish
};

आपकी मुख्य फ़ाइल "index.js" में इस लाइन को डालें:

import './config';

हर जगह आपको अपनी वस्तु का उपयोग करने की आवश्यकता होती है:

global.config.i18n.welcome.en

Question 6

वेबपैक में वैश्विक चर रख सकते हैं अर्थात webpack.config.js

externals: {
  'config': JSON.stringify(GLOBAL_VARIABLE: "global var value")
}

जेएस मॉड्यूल में जैसे पढ़ सकते हैं

var config = require('config')
var GLOBAL_VARIABLE = config.GLOBAL_VARIABLE

उम्मीद है कि यह मदद करेगा।

Question 7

अब तक मैंने जो सबसे अच्छा तरीका पाया है, वह है रिएक्ट कॉन्टेक्स्ट का उपयोग करना लेकिन इसे एक उच्च क्रम प्रदाता घटक के अंदर अलग करना ।

Question 8

आप https://facebook.github.io/react/docs/reusable-compenders.html#mixins पर प्रतिक्रिया करने के लिए मिश्रण का उपयोग कर सकते हैं ।

Question 9

यहां एक आधुनिक दृष्टिकोण है, जिसका उपयोग करते हुए globalThis, हमने अपने रिएक्ट नेटिव ऐप के लिए लिया ।

globalThis अब इसमें शामिल है ...

आधुनिक ब्राउज़र - एमडीएन प्रलेखन
टाइपस्क्रिप्ट 3.4 - हैंडबुक प्रलेखन
ESLint v7 - नोट्स जारी करें

_{appGlobals.ts}

// define our parent property accessible via globalThis. Also apply the TypeScript type.
var app: globalAppVariables;

// define the child properties and their types. 
type globalAppVariables = {
  messageLimit: number;
  // more can go here. 
};

// set the values.
globalThis.app = {
  messageLimit: 10,
  // more can go here.
};


// Freeze so these can only be defined in this file.
Object.freeze(globalThis.app);

_{App.tsx ( हमारी मुख्य प्रविष्टि बिंदु फ़ाइल )}

import './appGlobals'

// other code

_{anyWhereElseInTheApp.tsx}

const chatGroupQuery = useQuery(GET_CHAT_GROUP_WITH_MESSAGES_BY_ID, {
  variables: {
    chatGroupId,
    currentUserId: me.id,
    messageLimit: globalThis.app.messageLimit, // 👈 used here.
  },
});

Question 10

मुझे नहीं पता कि वे इस "रिएक्ट कॉन्टेक्स्ट" सामान के साथ क्या कहने की कोशिश कर रहे हैं - वे ग्रीक से बात कर रहे हैं, मेरे लिए, लेकिन यहाँ मैं इसे कैसे समझ सकता हूँ:

कार्यों के बीच मूल्यों को ले जाने, एक ही पृष्ठ पर

अपने निर्माता में, अपने सेटर को बांधें:

this.setSomeVariable = this.setSomeVariable.bind(this);

फिर अपने कंस्ट्रक्टर के ठीक नीचे एक फ़ंक्शन घोषित करें:

setSomeVariable(propertyTextToAdd) {
    this.setState({
        myProperty: propertyTextToAdd
    });
}

जब आप इसे सेट करना चाहते हैं, तो कॉल करें this.setSomeVariable("some value");

(आप भी दूर करने में सक्षम हो सकता है this.state.myProperty = "some value";)

जब आप इसे प्राप्त करना चाहते हैं, तो कॉल करें var myProp = this.state.myProperty;

उपयोग करके alert(myProp);आपको देना चाहिए some value।

पृष्ठों / घटकों में मूल्यों को ले जाने के लिए अतिरिक्त मचान विधि

आप this(तकनीकी रूप से this.stores) एक मॉडल को असाइन कर सकते हैं , इसलिए आप इसके साथ संदर्भ दे सकते हैं this.state:

import Reflux from 'reflux'
import Actions from '~/actions/actions`

class YourForm extends Reflux.Store
{
    constructor()
    {
        super();
        this.state = {
            someGlobalVariable: '',
        };
        this.listenables = Actions;
        this.baseState = {
            someGlobalVariable: '',
        };
    }

    onUpdateFields(name, value) {
        this.setState({
            [name]: value,
        });
    }

    onResetFields() {
        this.setState({
           someGlobalVariable: '',
        });
    }
}
const reqformdata = new YourForm

export default reqformdata

इसे एक फ़ोल्डर में सहेजें जिसे कहा storesजाता है yourForm.jsx।

फिर आप इसे दूसरे पेज में कर सकते हैं:

import React from 'react'
import Reflux from 'reflux'
import {Form} from 'reactstrap'
import YourForm from '~/stores/yourForm.jsx'

Reflux.defineReact(React)

class SomePage extends Reflux.Component {
    constructor(props) {
        super(props);
        this.state = {
            someLocalVariable: '',
        }
        this.stores = [
            YourForm,
        ]
    }
    render() {

        const myVar = this.state.someGlobalVariable;
        return (
            <Form>
                <div>{myVar}</div>
            </Form>
        )
    }
}
export default SomePage

यदि आपने this.state.someGlobalVariableकिसी फ़ंक्शन का उपयोग करके किसी अन्य घटक में सेट किया है:

setSomeVariable(propertyTextToAdd) {
    this.setState({
       myGlobalVariable: propertyTextToAdd
   });
}

कि आप के साथ कंस्ट्रक्टर में बाँधते हैं:

this.setSomeVariable = this.setSomeVariable.bind(this);

ऊपर दिखाए गए कोड का उपयोग करके मूल्य propertyTextToAddप्रदर्शित किया जाएगा SomePage।