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的数据传递，把子级的数据传回的父级组件：

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

猜你喜欢