美文网首页
react的context用法

react的context用法

作者: xiaoaiai | 来源:发表于2017-09-11 18:15 被阅读0次

    首先在使用context时使用 getChildContext 吧this.state return出来

    getChildContext = () => {
        return {
          themeColor: this.state.themeColor,
          onMainClick: this.state.onMainClick
        }
      }
    

    然后使用static childContextTypes验证属性

    • 属性必须验证
    static childContextTypes = {
        themeColor: PropTypes.string,
        onMainClick: PropTypes.func
      }
    

    在子组件中 这个必须再次验证一遍能用 (否则 不生效也不能用)

       static contextTypes = {
          themeColor: PropTypes.string,
          onMainClick: PropTypes.func
        }
    

    子组件中的使用方法

    <div className="main">
        main-content
        <br />
        {this.context.themeColor}
        <bt />
        <button onClick={this.context.onMainClick}>btn</button>
    </div>
    

    在子子组件中使用方法也一样

    以下是全部代码
    父组件

    import React,{Component} from 'react';
    import PropTypes from 'prop-types'
    
    class Header extends Component {
      constructor(props){
        super(props);
        this.state = {};
      }
      render() {
        const {themeColor}  = this.props
        return (
            <div className="header">
                header
                {themeColor}
            </div>
        );
      }
    }
    
    Header.propTypes = {
     themeColor: PropTypes.string
    }
    export default Header
    

    子组件

    import React,{Component} from 'react';
    import PropTypes from 'prop-types'
    
    class Main extends Component {
        static contextTypes = {
          themeColor: PropTypes.string,
          onMainClick: PropTypes.func
        }
        constructor(props){
            super(props);
            this.state = {};
        }
        render() {
            return (
    <div className="main">
        main-content
        <br />
        {this.context.themeColor}
        <bt />
        <button onClick={this.context.onMainClick}>btn</button>
    </div>
            );
        }
    }
    export default Main
    

    相关文章

      网友评论

          本文标题:react的context用法

          本文链接:https://www.haomeiwen.com/subject/ntbfsxtx.html