Как объявить глобальную переменную в React?

Question 1

Я инициализировал i18nобъект перевода один раз в компоненте (первый компонент, загружаемый в приложение). Этот же объект требуется во всех других компонентах. Я не хочу повторно инициализировать его в каждом компоненте. Что вокруг? Сделать его доступным для оконной области не помогает, так как мне нужно использовать его в render()методе.

Предложите общее решение этой проблемы, а не конкретное решение i18n.

Question 2

Почему бы вам не попробовать использовать контекст ?

Вы можете объявить глобальную переменную контекста в любом из родительских компонентов, и эта переменная будет доступна в дереве компонентов с помощью this.context.varname . Вам нужно только указать childContextTypesи getChildContextв родительском компоненте, и после этого вы можете использовать / изменять это из любого компонента, просто указав contextTypesв дочернем компоненте.

Однако обратите внимание на это, как указано в документации:

Так же, как при написании понятного кода лучше избегать использования глобальных переменных, в большинстве случаев вам следует избегать использования контекста. В частности, дважды подумайте, прежде чем использовать его для «экономии ввода» и использования его вместо явной передачи свойств.

Question 3

За пределами React

Возможно, вы не знали, что импорт уже является глобальным . Если вы экспортируете объект (синглтон), он становится глобально доступным как оператор импорта, а также может быть изменен глобально .

Если вы хотите инициализировать что-то глобально, но убедитесь, что оно изменено только один раз, вы можете использовать этот одноэлементный подход, который изначально имеет изменяемые свойства, но затем вы можете использовать Object.freezeего после первого использования, чтобы гарантировать его неизменность в сценарии инициализации.

const myInitObject = {}
export default myInitObject

затем в вашем методе инициализации, ссылаясь на него:

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

Он по- myInitObjectпрежнему будет глобальным, поскольку на него можно ссылаться где угодно как на импорт но он останется замороженным и выбрасывается, если кто-то попытается его изменить.

При использовании response-create-app

(на самом деле то, что я искал) В этом сценарии вы также можете чисто инициализировать глобальные объекты при обращении к переменным среды.

Создание файла .env в корне вашего проекта с префиксными REACT_APP_переменными внутри вполне подойдет. Вы можете ссылаться в своих JS и JSX по process.env.REACT_APP_SOME_VARмере необходимости, И они неизменны по дизайну.

Это позволяет избежать установки window.myVar = %REACT_APP_MY_VAR%в HTML.

Смотрите более полезные подробности об этом напрямую в Facebook:

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

Question 4

Не рекомендуется, но .... вы можете использовать componentWillMount из своего класса приложения, чтобы добавить через него свои глобальные переменные ... примерно так:

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

все еще считайте это взломом ... но он выполнит вашу работу

btw componentWillMount выполняется один раз перед рендерингом, подробнее см. здесь: https://reactjs.org/docs/react-component.html#mounting-componentwillmount

Question 5

Создайте файл с именем "config.js" в папке ./src со следующим содержимым:

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, т.е. в webpack.config.js

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

В модуле js можно читать как

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

Надеюсь, это поможет.

Question 7

Лучший способ, который я нашел до сих пор, - использовать React Context, но изолировать его внутри компонента поставщика высокого порядка .

Question 8

Вы можете использовать миксины в реакции https://facebook.github.io/react/docs/reusable-components.html#mixins .

Question 9

Вот современный подход, который globalThisмы использовали для нашего приложения React Native .

globalThis теперь входит в ...

Современные браузеры - документация MDN
Typescript 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

Я не знаю, что они пытаются сказать этим "React Context" - они говорят со мной по-гречески, но вот как я это сделал:

Передача значений между функциями на одной странице

В своем конструкторе привяжите свой сеттер:

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использовании кода, показанного выше.