用户模态与反应路由器,后台组件滚动不正确



当我使用pinterest的例子时,模态,我发现当页面滚动,打开模态时,页面的背景不能与prev相同,打开滚动后的模态背景为零

<Router history={newHistory}>
        <Route path="/" component={App}>
          <Route path="home" component={Container} >
            <IndexRedirect to="home"/>
            <Route path="login" component={Authentication}/>
            <Route path="home" component={Home}/>
            <Route path="post/:id" component={Post}/>
          </Route>
        </Route>
</Router>
<Link to='/post/123' state={{isModal:true}}/>
<Link to='/home' state={{isModal:false}}/>
<Link to='/login' state={{isModal:true}}/>
Container = React.createClass({
  render() {
    let isModal = (location.state && location.state.modal);
      return (
        <div id="MeContainer">
          <ModalControlOpen isModal={isModal}>
            <Modal isOpen={true} returnTo={location.state.returnTo}>
              {this.props.children ? childrenWithData : <h1>咦?内容呢?</h1>}
            </Modal>
          </ModalControlOpen>
          <ModalControlClose isModal={isModal}>
            {childrenWithData}
          </ModalControlClose>
        </div>
      )
   
  }
});
ModalControlOpen = React.createClass({
  render(){
    if (this.props.isModal) {
      return (
        this.props.children
      )
    } else return <div></div>
  }
});
ModalControlClose = React.createClass({
  shouldComponentUpdate(nextProp){
    return !nextProp.isModal
  },
  render(){
    return (
      this.props.children
    )
  }
});

最新更新