react-父子子孫組件嵌套-context

方案一

import React from 'react'
import ReactTypes from 'prop-types'

/* // 最外層的父組件
export default class Com1 extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      color: 'red'
    }
  }

  render() {
    return <div>
      <h1>這是 父組件 </h1>
      <Com2 color={this.state.color}></Com2>
    </div>
  }
}



// 中間的子組件
class Com2 extends React.Component {
  render() {
    return <div>
      <h3>這是 子組件 </h3>
      <Com3 color={this.props.color}></Com3>
    </div>
  }
}


// 內部的孫子組件
class Com3 extends React.Component {
  render() {
    return <div>
      <h5 style={{ color: this.props.color }}>這是 孫子組件 </h5>
    </div>
  }
} */

方案二：用context

context特性

記住一串單片語合getChildContextTypes
前3個、後3個、後兩個
一個方法、兩個靜態屬性

import React from 'react'
import ReactTypes from 'prop-types'

// 最外層的父組件
export default class Com1 extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      color: 'red'
    }
  }

  //   getChildContextTypes
  // 1. 在 父組件中，定義一個 function，這個function 有個固定的名稱，叫做 getChildContext ，內部，必須 返回一個 對象，這個對象，就是要共用給 所有子孫組件的  數據
  getChildContext() {
    return {
      color: this.state.color
    }
  }

  // 2. 使用 屬性校驗，規定一下傳遞給子組件的 數據類型， 需要定義 一個 靜態的（static） childContextTypes（固定名稱，不要改）
  static childContextTypes = {
    color: ReactTypes.string // 規定了 傳遞給子組件的 數據類型
  }


  render() {
    return <div>
      <h1>這是 父組件 </h1>
      <Com2></Com2>
    </div>
  }
}



// 中間的子組件
class Com2 extends React.Component {
  render() {
    return <div>
      <h3>這是 子組件 </h3>
      <Com3></Com3>
    </div>
  }
}



// 內部的孫子組件
class Com3 extends React.Component {

  // 3. 上來之後，先來個屬性校驗，去校驗一下父組件傳遞過來的 參數類型
  static contextTypes = {
    color: ReactTypes.string // 這裡，如果子組件，想要使用 父組件通過 context 共用的數據，那麼在使用之前，一定要先 做一下數據類型校驗
  }

  render() {
    return <div>
      <h5 style={{ color: this.context.color }}>這是 孫子組件  ---  {this.context.color} </h5>

    </div>
  }
}