代码之家  ›  专栏  ›  技术社区  ›  Leo Odishvili

在react中,上下文始终为空对象

  •  1
  • Leo Odishvili  · 技术社区  · 6 年前

    我正在尝试添加主题来响应本机应用程序,但不知何故它不起作用。请帮忙。
    我有一个背景:

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

    但在按钮和特殊上下文中,对象只是空的。不明白为什么。感谢您的帮助。

    <Vbcrider style={{
            primaryBackgroundColor: '#0000FF',
            primaryBorderColor: '#0000CF',
            warningBackgroundColor: '#FFA500',
            warningBorderColor: '#FF8C00'
        }}>
            <App
                rootReducers={rootReducers}
                initialState={{}}
                Navigator={RootPageNavigator}
            />
        </Vbcrider>
    
    1 回复  |  直到 6 年前
        1
  •  3
  •   karaxuna    6 年前

    尝试这种方式:

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