How to declare a global variable in React?

前端 未结 9 1212
自闭症患者
自闭症患者 2020-11-29 23:21

I initialized i18n translation object once in a component ( first component that loads in the app ) . That same object is required In all other components. I do

相关标签:
9条回答
  • 2020-11-29 23:57

    Why don't you try using Context?

    You can declare a global context variable in any of the parent components and this variable will be accessible across the component tree by this.context.varname. You only have to specify childContextTypes and getChildContext in the parent component and thereafter you can use/modify this from any component by just specifying contextTypes in the child component.

    However, please take a note of this as mentioned in docs:

    Just as global variables are best avoided when writing clear code, you should avoid using context in most cases. In particular, think twice before using it to "save typing" and using it instead of passing explicit props.

    0 讨论(0)
  • 2020-11-29 23:58

    Can keep global variables in webpack i.e. in webpack.config.js

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

    In js module can read like

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

    Hope this will help.

    0 讨论(0)
  • 2020-11-30 00:04

    Is not recommended but.... you can use componentWillMount from your app class to add your global variables trough it... a bit like so:

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

    still consider this a hack... but it will get your job done

    btw componentWillMount executes once before rendering, see more here: https://reactjs.org/docs/react-component.html#mounting-componentwillmount

    0 讨论(0)
  • 2020-11-30 00:06

    You can use mixins in react https://facebook.github.io/react/docs/reusable-components.html#mixins .

    0 讨论(0)
  • 2020-11-30 00:06

    I don't know what they're trying to say with this "React Context" stuff - they're talking Greek, to me, but here's how I did it:

    Carrying values between functions, on the same page

    In your constructor, bind your setter:

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

    Then declare a function just below your constructor:

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

    When you want to set it, call this.setSomeVariable("some value");

    (You might even be able to get away with this.state.myProperty = "some value";)

    When you want to get it, call var myProp = this.state.myProperty;

    Using alert(myProp); should give you some value .

    Extra scaffolding method to carry values across pages/components

    You can assign a model to this (technically this.stores), so you can then reference it with 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
    

    Save this to a folder called stores as yourForm.jsx.

    Then you can do this in another page:

    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
    

    If you had set this.state.someGlobalVariable in another component using a function like:

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

    that you bind in the constructor with:

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

    the value in propertyTextToAdd would be displayed in SomePage using the code shown above.

    0 讨论(0)
  • 2020-11-30 00:11

    The best way I have found so far is to use React Context but to isolate it inside a high order provider component.

    0 讨论(0)
提交回复
热议问题