react中的context

在React中，数据可以以流的形式自上而下的传递，每当你使用一个组件的时候，你可以看到组件的props属性会自上而下的传递。但是，在某些情况下，我们不想通过父组件的props属性一级一级的往下传递，我们希望在某一级子组件中，直接得到上N级父组件中props中的值这时就用到了context。

使用

• 首先安装依赖 prop-types(在React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes)

npm install prop-types --save

• 定义组件
  button.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Button extends Component {
  render () {
    return (
      <div>
        <button>{this.context.color}</button>
      </div>
    )
  }
}

Button.contextTypes = {
  color: PropTypes.string
}

export default Button

message.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Button from './button.js'

class Message extends Component {
  render () {
    return (
      <div>
        <Button></Button>
      </div>
    )
  }
}

export default Message 

messageList

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Message from './message.js'

class MessageList extends Component {
// 首先要定义 childContextTypes 
  static childContextTypes = {
    color: PropTypes.string
  }
// 通过getChildText方法，来给子context对象的属性赋值
  getChildContext () {
    return {
      color: '蓝色'
    }
  }
  render () {
    return (
      <div>
        <Message ></Message >
      </div>
    )
  }
}
// 此处的和上面 static定义取一个就行
// MessageList.childContextTypes = {
//   color: PropTypes.string
// }

export default MessageList