javascript 具有State和Consumer HOC的ReactJS Context API提供程序

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 具有State和Consumer HOC的ReactJS Context API提供程序相关的知识，希望对你有一定的参考价值。

import React, { createContext } from 'react';

const UserContext = createContext();

export default class UserProvider extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {},
            updateUser: this.updateUser
        };
    }

    updateUser = (newUser) => {
        this.setState({
            user: newUser
        });
    }

    render() {
        return (
            <UserContext.Provider value={this.state}>
                {this.props.children}
            </UserContext.Provider>
        )
    }
};

export const withUserContext = Inner => props => {
    return (
        <UserContext.Consumer>
            {context => {
                return <Inner user={context.user} updateUser={context.updateUser} {...props} />
            }}
        </UserContext.Consumer>
    );
};

以上是关于javascript 具有State和Consumer HOC的ReactJS Context API提供程序的主要内容，如果未能解决你的问题，请参考以下文章