美文网首页
使用React Context进行状态管理(二)共享变量(续)

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

作者: du1dume | 来源:发表于2019-05-03 10:03 被阅读0次

上回说到共享了变量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组件没啥关系。它其实就是传说中的爷爷组件用,爸爸组件用,儿子组件用,孙子组件用的共享变量。

相关文章

网友评论

      本文标题:使用React Context进行状态管理(二)共享变量(续)

      本文链接:https://www.haomeiwen.com/subject/zysanqtx.html