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

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

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

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

低版本的props-types在react中直接调用，高版本的需要另外引包props-types

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

总结：context进行传递数据时，必须在子级和父级都必须引入prop-types，在第一级父级中必须要有getChildContext函数和childContextTypes属性，其他子级中必须要有contextTypes属性，context的数据才能传递成功；不然无法传递

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