1. 隔代組件傳值

1.1 props傳遞

傳遞方式：通過props屬性自上而下逐層傳遞
存在問題：層級(jí)過多導(dǎo)致傳值繁瑣

import React from 'react'

//父組件
class App extends React.Component{
  render(){
    return (
      //1.傳遞value值
      <Demo1 value="hello hello"/>
    )
  }
}
//中間組件
class Demo1 extends React.Component{
  render(){
    return (
      //2.中間組件幫助傳遞value值
      <Demo2 value={this.props.value} />
    )
  }
}
//子組件
class Demo2 extends React.Component{
  render(){
    return (
      //3.接收value值
      <h1>{this.props.value}</h1>
    )
  }
}

export default App

1.2 Context傳遞

傳遞方式：類似于全局變量
存在問題：組件復(fù)用性較差
使用方法：

1. 創(chuàng)建Context（ValueContext可任意命名）
   const ValueContext = React.createContext('') //默認(rèn)值為''
2. 用ValueContext.Provider包裹組件樹中的根節(jié)點(diǎn)，并傳遞value值
   <ValueContext.Provider value="hello hello">
3. 此時(shí)，該組件樹中的節(jié)點(diǎn)均能訪問到步驟2中根節(jié)點(diǎn)所傳遞的value值
   3.1 指定contextType讀取當(dāng)前的ValueContext
   static contextType = ValueContext
   3.2 讀取value值
   this.context

import React from 'react'

//1.創(chuàng)建一個(gè)Context
const ValueContext = React.createContext('') //默認(rèn)值為''
//父組件
class App extends React.Component{
  render(){
    return (
      //2.用ValueContext.Provider包裹組件樹中的根節(jié)點(diǎn)
      //傳遞value值為"hello hello"
      //組件樹中的節(jié)點(diǎn)均能訪問到該value值
      <ValueContext.Provider value="hello hello">
        <Demo1/>
      </ValueContext.Provider>
    )
  }
}
//中間組件
class Demo1 extends React.Component{
  //指定contextType讀取當(dāng)前的ValueContext
  static contextType = ValueContext
  render(){
    return (
      //this.context即父組件中傳遞的"hello hello"
      <div>
        <h1>{this.context}</h1>
        <Demo2/>
      </div>
    )
  }
}
//子組件
class Demo2 extends React.Component{
  //指定contextType讀取當(dāng)前的ValueContext
  static contextType = ValueContext
  render(){
    return (
      //this.context即父組件中傳遞的"hello hello"
      <h2>{this.context}</h2>
    )
  }
}

export default App

效果圖：