Fehlender Kontext bei Verwendung von @connect

Question

Ich habe React App, die react-redux Bibliothek verwendet. Es funktioniert gut, ich bekomme meine store Kontext, ich kann Aktionen versenden. Schön.

Jetzt habe ich ein Problem getroffen. Ich möchte Kindkontext in einer Wurzelkomponente erklären und es benutzen, um globale Funktion direkt in die Kinder zu übergeben.

export default class Root extends React.Component { 
    globalFunc() { 
    } 

    getChildContext() { 
     return { 
      globalFunc: this.globalFunc 
     }; 
    } 

    render() { 
     return (
      { /* ChildComponent somewhere in here */ } 
     ); 
    } 
} 

Root.childContextTypes = { 
    globalFunc: PropTypes.func 
} 

Das Problem ist in einem der Kinder, die ich leeres Objekt, wenn ich @connect Dekorateur aus react-redux haben. Wenn ich den Decorator entferne, bekomme ich meinen Kontext richtig. Warum entfernt Redux den Kontext? Wie man eine Abhilfe schafft?

@connect(mapStateToProps) 
export default class ChildComponent extends React.Component { 
    constructor(props, context) { 
     super(props, context); 

     console.log(this.context); // EMPTY {} 
    } 

    render() { 
     // ... 
    } 
} 

ChildComponent.contextTypes = { 
    store: PropTypes.store.isRequired, 
    globalFunc: PropTypes.func 
} 

Answer 1

Ich hatte ein ähnliches Problem und wenn ich die „normalen“ HoC Form für die connect() Funktion anstelle des einen Dekorateur verwendet, wurde das Problem beheben. Beachten Sie, dass dies nicht empfohlen wird, um die Dekorateur Form zu verwenden, wie der Schöpfer von Redux dort gesagt: https://stackoverflow.com/a/35642430/757461

Auch wenn Sie wirklich Dekorateure verwenden möchten, könnte ich dieses Problem beheben, indem Sie meinen Zusammenhang mit einem Dekorateur definieren. Etwas ähnliches wie folgt aus:

export function context(contextTypes, context) { 
    return DecoratedComponent => { 
    return class extends Component { 
     static childContextTypes = contextTypes; 

     getChildContext() { 
     return context(this.props) 
     } 

     render() { 
     return <DecoratedComponent {...this.props} /> 
     } 
    } 
    } 
} 

Und dann verwenden Sie es wie folgt aus:

@connect(mapStateToProps, mapDispatchToProps) 
@context(contextTypes, getChildContext)