react context解决多层组件传参

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

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

2、改变context的初始值
	  <xx.Provider value ={值}>
        ...
      </xx.Provider>
    
3、读取context中的值
	多级读取:
	import  {Consumer} from '使用了Provider的组件路径,该组件将Consumer导出'
	方式一:
		回调函数的参数即是context中的值,返回值只能是一个函数,并且函数返回一个根组件
	  <xx.Consumer>
        {(参数)=><x>...{参数}</x> }
      </xx.Consumer>
      
   方式二:
   		必须在类组件中使用
   		static contextType=xx;
   		{this.context}读取context中的值

代码示例:
父组件:

import React,{useState,useEffect,useCallback,useRef} from 'react'
import PropTypes from 'prop-types'
import './dropdown.css'

export const {Provider,Consumer} = React.createContext("test");

function App(props) {

  return(


      <div onTransitionEnd={_transitioned} className='jf-dropdown-panel' ref={panelf}>
        <ul className='jf-dropdown-cont'>
          <Provider value={props.click}>
            {props.children}
          </Provider>
        </ul>
        
        
      </div>
    </div>
  )
}

export default App;

App.propTypes = {
  click: PropTypes.func,
  
}

App.defaultProps = {
  click:()=>{}
}

子组件:

import React, { useState } from 'react'
import { Consumer } from '../dropdown.jsx'
import './dropItem.css'

function App(props){
  
  return(
    
    <li className='jf-dropItem-container'>
      <Consumer>
        {(res) =>
          <span onClick={() => { res(props.children) }}>{ props.children }</span>
        }
        </Consumer>
    </li>

  )
}

export default App