Reactjs can'；t使用任何生命周期正确更新部件（react）

我有三个组件

路由

，

菜单

和一个

页面

，当单击相应的菜单项时，我试图更新

页面

（向下滚动到所选部分）

这是

路由

代码，它有一个状态

滚动目的地

，作为一个道具传递到

页面

，还有一个

设置滚动目的地

方法，作为道具传递到

菜单

export default class Routes extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        scrollDestination: '#part_1'
    };

    this.setScrollDestination = this.setScrollDestination.bind(this);
}

setScrollDestination(destination) { 
    this.setState({
        scrollDestination : destination
    })
}


render() {
    return (
        <Router onUpdate = {() => {document.body.scrollTop = 0}}>

            <div className="router">

                <Menu text = {this.props.text.header}
                        changeLang = {this.props.changeLang}
                        setScrollDestination = {this.setScrollDestination} />

                <Switch>
                    <Route exact path = "/"
                           render = {(props) => (
                                    <HomePage   text = {this.props.text} 
                                                changeLang = {this.props.changeLang} 
                                                {...props} />
                                    )} />

                    <Route path = "/page"
                           render = {(props) => (
                                    <Page   text = {this.props.text} 
                                            scrollDestination = {this.state.scrollDestination}
                                            {...props} />
                                    )} />
                </Switch>
            </div>
        </Router>
    );
}
}

}

页面

组件只能滚动页面。状态正在更新，但会忽略一些单击。它并不总是有效的

export default class Page extends React.Component {

constructor(props) {
    super(props);
}

componentWillReceiveProps(nextProps) {
    let scrollDestination = nextProps.scrollDestination;
    setTimeout(function() {
            TweenMax.to(window, 1, {scrollTo: {y:scrollDestination, offsetY:100}}); 
        }, 400);
    }
}

render() {
    return (
      <div id="part_1"></div>
      <div id="part_2"></div>
      <div id="part_3"></div>
    );
}

}

导出默认类页面扩展React.Component{
建造师（道具）{
超级（道具）；
}
组件将接收道具（下一步）{
让scrollDestination=nextrops.scrollDestination；
setTimeout（函数（）{
TweenMax.to（窗口，1，{scrollTo:{y:scrollDestination，offsetY:100}）；
}, 400);
}
}
render（）{
返回(
);
}
}

我已经尝试了所有的更新方法，它们都是一样的。问题出在哪里

第二件事是，当任何道具发生更改时，所有方法都会更新组件。如果某个特定属性发生更改，是否有任何方法可以运行方法

谢谢你的回答

export default class Page extends React.Component {

constructor(props) {
    super(props);
}

componentWillReceiveProps(nextProps) {
    let scrollDestination = nextProps.scrollDestination;
    setTimeout(function() {
            TweenMax.to(window, 1, {scrollTo: {y:scrollDestination, offsetY:100}}); 
        }, 400);
    }
}

render() {
    return (
      <div id="part_1"></div>
      <div id="part_2"></div>
      <div id="part_3"></div>
    );
}

}