react context解决多层组件传参

﹏ヽ暗。殇╰゛Y 2021-07-25 00:44 408阅读 0赞

能够更方便的在多层组件中传递参数
    
    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