web-dev-qa-db-fra.com

Comment déclarer une variable globale dans React?

J'ai initialisé l'objet de traduction i18n une fois dans un composant (premier composant chargé dans l'application). Ce même objet est requis dans tous les autres composants. Je ne veux pas le réinitialiser dans chaque composant. Quel est le chemin? Le rendre disponible dans la portée de la fenêtre ne m'aide pas car je dois l'utiliser dans la méthode render().

Veuillez suggérer une solution générique à ces problèmes et non une solution spécifique à i18n.

reactjsjavascript-globalize
60
sapy

Pourquoi n'essayez-vous pas d'utiliser Context ?

Vous pouvez déclarer une variable de contexte global dans l'un des composants parents. Cette variable sera accessible dans l'arborescence des composants par this.context.varname. Il vous suffit de spécifier childContextTypes et getChildContext dans le composant parent. Vous pouvez ensuite utiliser/modifier ceci à partir de tout composant en spécifiant simplement contextTypes dans le composant enfant.

Cependant, veuillez en prendre note, comme mentionné dans la documentation:

Tout comme il est préférable d'éviter les variables globales lors de l'écriture de code clair, vous devez éviter d'utiliser le contexte dans la plupart des cas. En particulier, réfléchissez-y à deux fois avant de l'utiliser pour "enregistrer le typage" et utilisez-le au lieu de transmettre des propriétés explicites.

26
Naisheel Verdhan

N'est pas recommandé mais .... vous pouvez utiliser composantWillMount à partir de votre classe d'application pour ajouter vos variables globales à travers elle ... un peu comme suit

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

considérez toujours ceci comme un bidouillage ... mais votre travail sera terminé

btw composantWillMount s'exécute une fois avant le rendu, voir plus ici: https://reactjs.org/docs/react-component.html#mounting-componentwillmount

25
rokyed

Vous pouvez utiliser mixins dans react https://facebook.github.io/react/docs/reusable-components.html#mixins .

3
Ramratan Gupta

Au-delà de la réaction

Vous n'êtes peut-être pas au courant qu'un import est déjà global . Si vous exportez un objet (singleton), il est alors globalement accessible en tant qu'instruction d'importation et il peut également être modifié globalement .

Si vous souhaitez initialiser quelque chose globalement mais vous assurer de ne le modifier qu'une seule fois, vous pouvez utiliser cette approche singleton qui a initialement des propriétés modifiables, mais vous pouvez ensuite utiliser Object.freeze après sa première utilisation pour assurer son immuable dans votre scénario init.

const myInitObject = {}
export default myInitObject

puis dans votre méthode init la référençant:

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

La myInitObject sera toujours globale car elle peut être référencée n’importe où en tant qu’import mais restera figée et renvoyée si quelqu'un tente de la modifier.

Si vous utilisez react-create-app

(ce que je cherchais réellement) Dans ce scénario, vous pouvez également initialiser proprement des objets globaux lors du référencement de variables d'environnement.

Créer un fichier .env à la racine de votre projet avec des variables préfixées REACT_APP_ convient très bien. Vous pouvez référencer dans votre JS et votre JSX process.env.REACT_APP_SOME_VAR selon vos besoins ET que ce soit immuable de par sa conception.

Cela évite d'avoir à définir window.myVar = %REACT_APP_MY_VAR% en HTML.

Voir plus de détails utiles à ce sujet de Facebook directement:

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

2
Jason Sebring

Le meilleur moyen que j’ai trouvé jusqu’à présent consiste à utiliser Réagir Contexte mais à l’isoler dans un composant fournisseur fournisseur élevé . 

2
Nick Tsoyrektsidis

Peut conserver des variables globales dans le webpack, c'est-à-dire dans webpack.config.js

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

Dans le module js peut se lire comme

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

J'espère que cela aidera. 

1
Shashank Bhong