使用React Context进行状态管理（二）共享变量（续）

上回说到共享了变量user，我们发现还遗留了两个callback，如法炮制，把这两个callback也丢到共享环境里去。于是乎Provider变成了这个样子：

                {
                    this.state.user
                        ?
                        (
)
                        :
                        ()
                }

首先我们看到Provider的value这里我们扔进去了个对象，这个对象里面包含了我们要共享的三个东东。其次我们看到，Main组件和Login组件已经变成了干干净净一张大白纸。

我们先来到要用user和onLogout的Menu组件，我们知道Consumer里是个函数，共享变量是通过函数参数传递给JSX使用的，上次只有一个user，所以直接传user就行了，但今天我们丢进去的对象，所以在传参的时候也要传递个对象，这里可以直接用对象解构即可。代码变成如下样子：

    {
        ({ user, onLogout }) => (
            

                
                {this.state.visible && (
                    

                        
退出登录
                    
                )}
            
        )
    }

再重申一次，丢进去的是个对象，使用时也是个对象，因此在MessageList组件中用到的user要加上{}才行哦。不贴代码了就。

最后我们来看看Login组件。没啥可说的，先import进来UserContext，再使用Consumer提取共享变量供组件享用，代码如下：

    {
        ({ onLogin }) => (
            

                
 submitHandler(e, onLogin)}>
                    
                        用户名
                        
                    
                    
                        密码
                        
                    
                    {error && 
{error.message}
}
                    登录
                
            
        )
    }

这里要说明的是，之前onLogin是在submitHandler函数中用到的，我们是通过props传递过来的，所以在函数中直接使用this.props.onLogin没有问题。但现在onLogin是在JSX中传递进来的，怎么给submitHandler函数呢？多加个参数呗，传给它就好了。

下一讲我们要讲如何把user的相关操作从App组件中抽取出来成独立的组件，仔细想想其实user和App组件没啥关系。它其实就是传说中的爷爷组件用，爸爸组件用，儿子组件用，孙子组件用的共享变量。