react中context的使用（es6）

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
};