美文网首页
react中context的使用(es6)

react中context的使用(es6)

作者: 那颗星_fcaf | 来源:发表于2018-07-03 18:10 被阅读26次

    context的作用

    context 通过组件数提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。

    在一个典型的 React 应用中,数据是通过 props 属性由上向下(由父及子)的进行传递的,但这对于某些类型的属性而言是极其繁琐的(例如:地区偏好,UI主题),这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式,而不必通过组件树的每个层级显式地传递 props 。

    在react中实现context的使用

    //使用context中值的组件
    import React from 'react';
    import PropTypes from 'prop-types';
    class Button extends React.Component {
      render() {
        return (
          // context中的值具体的使用
          <button style={{background: this.context.color}}>
            {this.props.children}
          </button>
        );
      }
    }
    
    Button.contextTypes = {
      color: PropTypes.string
    };
    
    // 中间的组件
    import React from 'react';
    class Message extends React.Component {
      render() {
        return (
          <div>
            {this.props.text} <Button>Delete</Button>
          </div>
        );
      }
    }
    
    // 顶级组件,在配置context的值
    import React from 'react';
    import PropTypes from 'prop-types';
    class MessageList extends React.Component {
      getChildContext() {
      // 设置context中color的具体值
        return {color: "purple"};
      }
    
      render() {
        const children = this.props.messages.map((message) =>
          <Message text={message.text} />
        );
        return <div>{children}</div>;
      }
    }
    
    MessageList.childContextTypes = {
      // 指定context中存在color,对应的值为字符串类型
      color: PropTypes.string
    };
    

    相关文章

      网友评论

          本文标题:react中context的使用(es6)

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