react context解决多层组件传参

能够更方便的在多层组件中传递参数

1、创建上下文对象,并设定初始值
	const xx=React.createContext(参数);

2、改变context的初始值
	  
        ...
      
    
3、读取context中的值
	方式一:
		回调函数的参数即是context中的值
	  
        {(参数)=>...{参数} }
      
      
   方式二:
   		必须在类组件中使用
   		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;