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的數據傳遞，把子級的數據傳回的父級組件：