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的資料傳遞，把子級的資料傳回的父級元件：