reactjs - React 中的 Context 始终是空对象

Question

我正在尝试将主题添加到 react native 应用程序中，但不知何故它不起作用。请帮忙。
我有一个上下文:

import * as React from 'react';

export const VBContext = React.createContext({});

export default VBContext;  

然后我有一个我使用的自定义提供程序:

import * as React from 'react';
import { VBContext } from './Context';

class Vbcrider extends React.Component<any, any> {
    constructor(props) {
        super(props)

        const { style } = props

        this.state = {
            style
        }
    }

    render() {
        const { children } = this.props;

        const Context = VBContext;

        return (
            <Context.Provider value={this.state.style}>
                {children}
            </Context.Provider>
        );
    }
}

export default Vbcrider;  

我还有一个 HOC，它应该将此上下文提供给其他组件:

import * as React from 'react';
import { VBContext } from './Context';

function withStyle(WrappedComponent) {
    return class extends React.Component<any, any> {
        render() {
            const Context = VBContext;

            return (
                <Context.Consumer>
                    {
                        () => <WrappedComponent {...this.props} />
                    }
                </Context.Consumer>
            );
        }
    };
}

export default withStyle;  

还有一个按钮，我在其中使用上面提到的 HOC:

@withStyle
class Button extends React.Component<any, any> {
    style () {
        const {
            type,
            theme
        } = this.props;

        return {
            //some logic based on theme
        }
    }

    render () {
        const {
            onPress,
            children
        } = this.props;

        return (
            <TouchableOpacity style={this.style()} onPress={() => onPress}>
                {children}
            </TouchableOpacity>
        )
    }
}  

但是在按钮和 HOC 上下文中只是空对象。不明白为什么。任何帮助表示赞赏。

<Vbcrider style={{
        primaryBackgroundColor: '#0000FF',
        primaryBorderColor: '#0000CF',
        warningBackgroundColor: '#FFA500',
        warningBorderColor: '#FF8C00'
    }}>
        <App
            rootReducers={rootReducers}
            initialState={{}}
            Navigator={RootPageNavigator}
        />
    </Vbcrider>

Answer 1

试试这个方法:

function withStyle(WrappedComponent) {
    return class extends React.Component<any, any> {
        render() {
            const Context = VBContext;

            return (
                <Context.Consumer>
                    {
                        (value) => <WrappedComponent {...this.props} theme={value} />
                    }
                </Context.Consumer>
            );
        }
    };
}