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

Posted 2021-05-03

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>
    );
};