5

I manage to pass context through children but only once. Context is never updated. Yet I have seen many examples working like that, including react docs: https://facebook.github.io/react/docs/context.html

Here is my code:

Parent Component:

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            window:{
                height:null,
                width:null
            }
        };
    }

    getChildContext() {
        return { 
            window: this.state.window
        }
    }

    componentDidMount () {
        window.addEventListener('resize', this.handleResize.bind(this));
        this.handleResize();
    }

    componentWillUnmount () {
        window.removeEventListener('resize', this.handleResize.bind(this));
    }

    handleResize (){
        this.setState({
            window:{
                width:window.innerWidth
                    || document.documentElement.clientWidth
                    || document.body.clientWidth,
                height:window.innerHeight
                    || document.documentElement.clientHeight
                    || document.body.clientHeight
            }
        });
    }

    render() {
        console.log(this.state.window);
        // --> working
        return (
            {this.props.children}
        );
    }
}

App.propTypes = {
    children: React.PropTypes.node.isRequired
};

App.childContextTypes = {
    window: React.PropTypes.object
}

export default App;

Child Component:

class Child extends React.Component {

    constructor(props, context) {
        super(props);
        this.state = {};
    }

    render () {

        console.log(this.context.window);
        // --> passed on first render, but never updated

        return (
            ...
        )
    }
}


Child.contextTypes = {
    window: React.PropTypes.object.isRequired
};

export default Child

Am i missing something?

Victorien
  • 181
  • 1
  • 7
  • 1
    Unrelated to your problem, the `window.removeEventListener('resize', this.handleResize.bind(this))` will NOT remove the listener previously registered with `addEventListener()`! `Function.prototype.bind()` returns a new reference every time it is called. (E.g. look at [this](http://stackoverflow.com/questions/15819251/why-does-removeeventlistener-not-work-in-this-object-context) and [that](http://stackoverflow.com/questions/11565471/removing-event-listener-which-was-added-with-bind).) – Nikos Paraskevopoulos Mar 24 '16 at 13:41
  • You may be plagued by [this issue](https://github.com/facebook/react/issues/2517), a simple fiddle/plunk would help. – Nikos Paraskevopoulos Mar 24 '16 at 13:49
  • I'm unable to reproduce this issue, everything is working fine here https://jsfiddle.net/dannyjolie/0s4wsozs/1/ . Which leads me to believe that the error is caused by something we can't see in your code. – dannyjolie Mar 24 '16 at 13:56
  • Thx @NikosParaskevopoulos! I was not aware of that! – Victorien Mar 24 '16 at 14:34
  • @NikosParaskevopoulos, dannyjolie, the fact is i use react-intl, so yeah this might be the problem. I'll let you know. – Victorien Mar 24 '16 at 14:41
  • Or, it could be react-relay :) – Victorien Mar 24 '16 at 15:24

0 Answers0