react context解決多層組件傳參

能夠更方便的在多層組件中傳遞參數

1、創建上下文對象,並設定初始值
	const xx=React.createContext(參數);

2、改變context的初始值
	  <xx.Provider value ={值}>
        ...
      </xx.Provider>
    
3、讀取context中的值
	方式一:
		回調函數的參數即是context中的值
	  <xx.Consumer>
        {(參數)=><x>...{參數}</x> }
      </xx.Consumer>
      
   方式二:
   		必須在類組件中使用
   		static contextType=xx;
   		{this.context}讀取context中的值

代碼示例:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

//創建上下文對象，傳入初始值
const CountContext=React.createContext(0);

class App extends Component {
  state={
    count:1
  }
  render() {
    return (
      <div className="App">
        
      <CountContext.Provider value ={this.state.count}>
        <B></B>
      </CountContext.Provider>

      </div>
    );
  }
}

function B()
{
  return(
    <div>
        <h1>B組件</h1>
          <C></C>
          
    </div>

  )
}
function C()
{
  return(
    <div>

      <CountContext.Consumer>
        {count=><h1>C組件:count={count}</h1>}
      </CountContext.Consumer>
       <D></D>

    </div>
  )
}

class D extends React.Component
{
  static contextType=CountContext;
  
  render(){
    return(
      <div>
  
        D組件:{this.context}
         
  
      </div>
    )

  }

}

export default App;