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

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

<UserContext.Provider value={
                {
                    user: this.state.user,
                    onLogin: this.loginHandler,
                    onLogout: this.logoutHandler
                }
}>
                {
                    this.state.user
                        ?
                        (<Main />)
                        :
                        (<Login />)
                }
</UserContext.Provider>

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

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

<UserContext.Consumer>
    {
        ({ user, onLogout }) => (
            <div>
                <img
                    src={user.avatar}
                    onClick={this.toggleMenu}
                    ref={this.avatarRef}
                    />
                {this.state.visible && (
                    <ul>
                        <li onClick={onLogout}>退出登录</li>
                    </ul>
                )}
            </div>
        )
    }
</UserContext.Consumer>

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

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

<UserContext.Consumer>
    {
        ({ onLogin }) => (
            <div>
                <form onSubmit={e => submitHandler(e, onLogin)}>
                    <label>
                        用户名
                        <input
                            name="username"
                            value={username}
                            onChange={inputChangeHandler}
                            />
                    </label>
                    <label>
                        密码
                        <input
                            name="password"
                            type="password"
                            value={password}
                            onChange={inputChangeHandler}
                            />
                    </label>
                    {error && <div>{error.message}</div>}
                    <button type="submit" disabled={loading}>登录</button>
                </form>
            </div>
        )
    }
</UserContext.Consumer>

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

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