Ответ 1

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

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

Однако, пожалуйста, обратите внимание на это, как указано в документации:

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

Ответ 2

Не рекомендуется, но.... вы можете использовать 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

Ответ 3

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

Ответ 4

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

Ответ 5

Может содержать глобальные переменные в webpack, то есть в webpack.config.js

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

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

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

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

Ответ 6

Beyond React

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

Если вы хотите инициализировать что-то глобально, но при этом убедитесь, что оно было изменено только один раз, вы можете использовать этот одноэлементный подход, который изначально имеет изменяемые свойства, но затем вы можете использовать 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_ внутри очень хорошо. Вы можете ссылаться в своем 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

Ответ 7

Я не знаю, что они пытаются сказать с этим материалом "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 используя код, показанный выше.