react context的使用

一般说到react的参数传递,比较常规的父子组件我们都知道有props

当组件之间的上下层关系多了,父到子,子到孙,孙与孙等等,一系列复杂的关系层都共享某些公共的变量时,我们常用的方法有

1.redux

2.context

redux此处不多做阐述了,这里介绍下context的用法,context可以有多个

创建一个context 对象

menu-context.js
export const menuContext = React.createContext({
	defaultKey:1,//设置默认的值,
    toggleItem:()=>{}//设置默认的变化函数
})
//defaultKey,toggleItem分别为子组件后面用到的变量和函数方法



最外层组件供给者包裹
menu.js

state = {
	defaultKey:2
}
toggleItem = (value)=>{
	this.setState({
    	defaultKey:value
    })
}
render(){
	//Provider 接收一个 value 属性，传递给消费组件,此处provider传递给消费者state中的defaultKey,以及更新函数toggleItem
    //原来context组件中的默认值会被provider传递的值替换
	return (
        <menuContext.Provider value={{defaultKey:this.state.defaultKey,toggleItem:this.toggleItem}}>
          <div>展示value:{defaultKey}</div>
      </menuContext.Provider>
    )
}


消费者部分
consumer.js

return (
	<menuContext.Consumer>
    	{
        	({defaultKey,toggleItem})=>(
            	<div onCllick={()=>toggleItem('hahah')}>消费内容:{defaultKey}</div>
            )
        }
    </menuContext.Consumer>
)

消费者默认展示  			消费内容:2
消费者点击消费内容后展示    消费内容:hahah