react学习之路（2.2）-----数据传递（props(子传父级)，context）

react学习之路，数据传递（props,context）;

再讲props子父级之前，先学习一下context这个非常NB的数据接收容器，如何正确的使用，接下来为大家介绍，

用它之前，我们必须要知道有个叫prop-types的东西，从英文我们就知道意思就是叫我们定义数据类型；而他真正的作用就是变量的类型检测；它主要是对prop中的变量进行类型检测；prop也是第三方类组件库；接下来学习一下如何使用context这个超NB的数据容器，可能有点复杂，但是很好使；

一context：第一步需要加载安装prop-type依赖（webpack打包的示列）cnpm install prop-types进行安装就能使用；

安装成功之后，接下来就要开始怎么用啦，分以下这几步：

1.在先级组件(index.jsx)中先要定义(其中关于组件怎么运用，我上一节已经阐述过啦，这节就不废话啦)；

   先引入prop-types包

import PropTypes from 'prop-types'

  class类中定义传递的数据，通过getChildContext（）函数定义数据；

class Index extends Component{constructor() {} getChildContext(){//设置context数据  return {'text':'this.state.text'}}render(){        return(          <div>            <Hello ></Hello>{//定义子组件调用            }          </div>    )  }}Index.childContextTypes = {//检测的数据类型，传递给下一级  text:PropTypes.string}

childContextTypes必须得设置，不设置在各下级组件中无法获取到数据，这项是必须项；

不设置会报这样的错误：Index.getChildContext(): childContextTypes must be defined in order to use getChildContext().

在孙子组件（son.jsx）中：

import PropTypes from 'prop-types'//需要引包 class Son extends Component{ constructor(props,context){ super(props) console.log(context); }  render(){    return(      <div className="hello">          我是孙子辈组件！          {this.context.text}                </div>    )  }}Son.contextTypes = {  text:PropTypes.string}

注意：contextTypes必须得设置不然无法获取数据；注意首字母大小写问题；一般就会OK！通过这个无定义多少个子组件孙子组件都能使用获取数据；context中数据，是可以改变的，不只是读取；上一级能改变其数据，但是子级改变的数据，无法在view中显示，能改变，要想在view中显示，必须通过一些手段；可以通过上一级传一个方法或函数，在子级调用改变；

2.父级改变子级数据；见代码：

上级改变子级的代码：index.jsx

class Index extends Component{constructor() {    super()    this.state={      text:24    }  } getChildContext(){//设置context数据  return {'text':this.state.text}}add(){  this.setState({       text:this.state.text+1  })}render(){        return(          <div>            <Hello ></Hello>{//定义组件调用            }            <input type="button" name='button'  value='点我' onClick={this.add.bind(this)} />          </div>    )  }}Index.childContextTypes = {//检测的数据类型，传递给下一级  text:PropTypes.number}

各子级：（son.jsx(孙子级组件)）

onstructor(props,context){ super(props,context) //console.log(context.text) console.log(this.context.text); }  render(){    return(      <div className="hello">          我是孙子辈组件！          {this.context.text}          {this.context.text}                </div>    )  }}Son.contextTypes = {  text:PropTypes.number}

3.通过传递一个函数方法，在子组件改变父组件的数据：

祖先级的方法（index.jsx）

class Index extends Component{constructor() {    super()    this.state={      text:24    }  } getChildContext(){//设置context数据  return {    'text':this.state.text,     addNum:this.add.bind(this)//传递的函数或方法   }}add(){  this.setState({       text:this.state.text+1  })}render(){        return(          <div>            <Hello ></Hello>{//定义组件调用            }            <input type="button" name='button'  value='点我' onClick={()=>{this.setState({text:this.state.text+1})}} />           <p> {this.state.text}</p>          </div>    )  }}Index.childContextTypes = {//检测的数据类型，传递给下一级  text:PropTypes.number,  addNum:PropTypes.func}

孙子级（son.jsx）组件：

class Son extends Component{ constructor(props,context){ super(props,context) //console.log(context.text) console.log(this.context); }  render(){    return(      <div className="hello">          我是孙子辈组件！          <input type="button" name='button'  onClick={this.context.addNum.bind(this)} value='我是孙子辈组件' />          <p>{this.context.text}</p>                      </div>    )  }}Son.contextTypes = {  text:PropTypes.number,  addNum:PropTypes.func}

下面再来介绍关于props的数据传递，把子级的数据传回的父级组件：