Я инициализировал i18n
объект перевода один раз в компоненте (первый компонент, загружаемый в приложение). Этот же объект требуется во всех других компонентах. Я не хочу повторно инициализировать его в каждом компоненте. Что вокруг? Сделать его доступным для оконной области не помогает, так как мне нужно использовать его в render()
методе.
Предложите общее решение этой проблемы, а не конкретное решение i18n.
Redux
илиFlux
библиотеку, которая может обрабатывать данные или состояние глобально. и вы можете легко передать его через все ваши компонентыОтветы:
Почему бы вам не попробовать использовать контекст ?
Вы можете объявить глобальную переменную контекста в любом из родительских компонентов, и эта переменная будет доступна в дереве компонентов с помощью
this.context.varname
. Вам нужно только указатьchildContextTypes
иgetChildContext
в родительском компоненте, и после этого вы можете использовать / изменять это из любого компонента, просто указавcontextTypes
в дочернем компоненте.Однако обратите внимание на это, как указано в документации:
источник
За пределами React
Возможно, вы не знали, что импорт уже является глобальным . Если вы экспортируете объект (синглтон), он становится глобально доступным как оператор импорта, а также может быть изменен глобально .
Если вы хотите инициализировать что-то глобально, но убедитесь, что оно изменено только один раз, вы можете использовать этот одноэлементный подход, который изначально имеет изменяемые свойства, но затем вы можете использовать
Object.freeze
его после первого использования, чтобы гарантировать его неизменность в сценарии инициализации.затем в вашем методе инициализации, ссылаясь на него:
Он по-
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
источник
Не рекомендуется, но .... вы можете использовать componentWillMount из своего класса приложения, чтобы добавить через него свои глобальные переменные ... примерно так:
все еще считайте это взломом ... но он выполнит вашу работу
btw componentWillMount выполняется один раз перед рендерингом, подробнее см. здесь: https://reactjs.org/docs/react-component.html#mounting-componentwillmount
источник
componentWillMount
это устарело: reactjs.org/blog/2018/03/27/update-on-async-rendering.htmlСоздайте файл с именем "config.js" в папке ./src со следующим содержимым:
В главном файле index.js поместите эту строку:
Везде, где вам нужен ваш объект, используйте это:
источник
Может хранить глобальные переменные в webpack, т.е. в
webpack.config.js
В модуле js можно читать как
Надеюсь, это поможет.
источник
Лучший способ, который я нашел до сих пор, - использовать React Context, но изолировать его внутри компонента поставщика высокого порядка .
источник
Вы можете использовать миксины в реакции https://facebook.github.io/react/docs/reusable-components.html#mixins .
источник
Вот современный подход, который
globalThis
мы использовали для нашего приложения React Native .globalThis
теперь входит в ...appGlobals.ts
App.tsx ( наш основной файл точки входа )
anyWhereElseInTheApp.tsx
источник
Я не знаю, что они пытаются сказать этим "React Context" - они говорят со мной по-гречески, но вот как я это сделал:
Передача значений между функциями на одной странице
В своем конструкторе привяжите свой сеттер:
Затем объявите функцию чуть ниже вашего конструктора:
Когда вы захотите установить его, позвоните
this.setSomeVariable("some value");
(Возможно, вам даже удастся уйти
this.state.myProperty = "some value";
)Когда захочешь получить, звони
var myProp = this.state.myProperty;
Использование
alert(myProp);
должно дать вамsome value
.Дополнительный метод построения лесов для переноса значений по страницам / компонентам
Вы можете назначить модель
this
(техническиthis.stores
), чтобы затем ссылаться на нееthis.state
:Сохраните это в папке под
stores
названиемyourForm.jsx
.Затем вы можете сделать это на другой странице:
Если вы установили
this.state.someGlobalVariable
другой компонент, используя такую функцию, как:которые вы связываете в конструкторе с помощью:
значение
propertyTextToAdd
будет отображаться приSomePage
использовании кода, показанного выше.источник