Question

我在我的App.js文件中使用导航和侧边栏组件，因为它们存在于整个应用程序中，因此我不想重新渲染它们，但是这两个组件应该仅为登录用户显示，因此App组件如下所示：

export default class App extends React.Component {
  render () {
    return (
      <div className={cx('App')}>
        {(this.props.authenticated) ? (<Navigation />) : null}
        {this.props.children}
        {(this.props.authenticated) ? (<Sidebar />) : null}
      </div>
    )
  }
}

现在问题是，当我到达注销页面时，当路由发生变化时this.props.children会改变（即子节点通常是Page组件），这意味着使用不再会看到补充工具栏和导航组件，一瞬间我看到孩子们首先消失，然后是侧边栏和导航，这会导致有些不愉快的ui过渡，我想知道是否有办法强制组件同步卸载？

Answer 1

尝试这样的事情吗？

export default class App extends React.Component {
  render () {
    if(this.props.authenticated){
      return (
        <Navigation />
        {this.props.children}
        <Sidebar />
      )
    }else{
      return ({this.props.children})
    }

  }
}

组件卸载延迟

1 个答案: