在setState

时间:2016-03-24 13:09:08

标签: reactjs react-router

我设法通过孩子传递上下文但只有一次。上下文永远不会更新。 然而,我看到很多例子都是这样的,包括反应文档:https://facebook.github.io/react/docs/context.html

这是我的代码:

父组件:

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;

子组件:

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

我错过了什么吗?

0 个答案:

没有答案