reactjs - localstorage - session storage react

¿Cómo declarar una variable global en React?

Question

Inicialicé el objeto de traducción i18n una vez en un componente (primer componente que se carga en la aplicación). Se requiere el mismo objeto en todos los demás componentes. No quiero reiniciarlo en cada componente. ¿Qué hay de vuelta? Hacer que esté disponible para el alcance de la ventana no ayuda, ya que necesito usarlo en el método render() .

Sugiera una solución genérica para este problema y no una solución específica.

Answer 1

Más allá de reaccionar

Es posible que no sepa que una importación ya es global . Si exporta un objeto (singleton), entonces es accesible globalmente como una declaración de importación y también puede modificarse globalmente .

Si desea inicializar algo globalmente pero asegurarse de que solo se modifique una vez, puede usar este enfoque único que inicialmente tiene propiedades modificables, pero luego puede usar Object.freeze después de su primer uso para garantizar que sea inmutable en su escenario de inicio.

const myInitObject = {}
export default myInitObject

luego en su método init haciendo referencia a él:

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

El myInitObject seguirá siendo global, ya que se puede hacer referencia a él en cualquier lugar como una importación, pero permanecerá congelado y arrojado si alguien intenta modificarlo.

Si usa react-create-app

(lo que estaba buscando en realidad) En este escenario también puede inicializar objetos globales limpiamente al hacer referencia a variables de entorno.

Crear un archivo .env en la raíz de su proyecto con las variables REACT_APP_ prefijadas en el interior funciona bastante bien. Puede hacer referencia dentro de su proceso JS y JSX.env.REACT_APP_SOME_VAR según lo necesite Y es inmutable por diseño.

Esto evita tener que establecer window.myVar = %REACT_APP_MY_VAR% en HTML.

Vea más detalles útiles sobre esto de Facebook directamente:

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

Answer 2

¿Por qué no intentas usar Context ?

Puede declarar una variable de contexto global en cualquiera de los componentes principales y esta variable será accesible a través del árbol de componentes mediante this.context.varname . Solo tiene que especificar childContextTypes y getChildContext en el componente principal y, a partir de entonces, puede usar / modificar esto desde cualquier componente simplemente especificando contextTypes en el componente secundario.

Sin embargo, tome nota de esto como se menciona en los documentos:

Así como las variables globales se evitan mejor al escribir código claro, debe evitar el uso de contexto en la mayoría de los casos. En particular, piénselo dos veces antes de usarlo para "guardar la escritura" y usarlo en lugar de pasar accesorios explícitos.

Answer 3

La mejor manera que he encontrado hasta ahora es usar Context pero aislarlo dentro de un componente de proveedor de alto orden .

Answer 4

No sé qué están tratando de decir con estas cosas de "Contexto de reacción": me están hablando en griego, pero así es como lo hice:

Llevar valores entre funciones, en la misma página

En su constructor, vincule su setter:

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

Luego declara una función justo debajo de tu constructor:

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

Cuando desee configurarlo, llame a this.setSomeVariable("some value");

(Incluso puede salirse con la this.state.myProperty = "some value"; con this.state.myProperty = "some value"; )

Cuando desee obtenerlo, llame a var myProp = this.state.myProperty;

Usando alert(myProp); debería darte some value .

Método de andamiaje adicional para transportar valores a través de páginas / componentes

Puede asignar un modelo a this (técnicamente this.stores ), para que luego pueda hacer referencia a él con 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

Guarde esto en una carpeta llamada stores como yourForm.jsx .

Entonces puedes hacer esto en otra página:

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

Si hubiera configurado this.state.someGlobalVariable en otro componente utilizando una función como:

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

que te unes al constructor con:

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

el valor en propertyTextToAdd se mostraría en SomePage usando el código que se muestra arriba.

Answer 5

No se recomienda, pero ... puede usar componentWillMount desde su clase de aplicación para agregar sus variables globales a través de él ... un poco así:

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

todavía considero que esto es un truco ... pero hará tu trabajo

btw componentWillMount se ejecuta una vez antes de renderizar, vea más aquí: https://reactjs.org/docs/react-component.html#mounting-componentwillmount

Answer 6

Puede mantener variables globales en webpack, es decir, en webpack.config.js

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

En js el módulo puede leer como

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

Espero que esto ayude.

Answer 7

Puede usar mixins en reaccionar https://facebook.github.io/react/docs/reusable-components.html#mixins .