[英]Delay in component unmounting
I am using navigation and sidebar components inside of my App.js file, as they are present across whole application, hence I would not want to re-render them, however these 2 components should be only displayed for logged in users, hence App component looks like this: 我正在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>
)
}
}
Now the issue, as this.props.children
change when routes change (ie children are usually Page components) when I get to the logout page, that means that uses no longer see Sidebar and Navigation components, for a split second I see children disappear first and then Sidebar and Navigation, this leads to somewhat unpleasant ui transition and I would like to know if there is a way to force components unmount synchronously? 现在的问题是,当我进入注销页面时,当路线更改时
this.props.children
发生更改(即,子级通常是Page组件),这意味着不再使用侧边栏和导航组件,一瞬间,我看到子级消失了首先是补充工具栏和导航,这会导致ui过渡有些不愉快,我想知道是否有一种方法可以强制组件同步卸载?
Try something like this maybe ? 尝试这样的事情吧?
export default class App extends React.Component {
render () {
if(this.props.authenticated){
return (
<Navigation />
{this.props.children}
<Sidebar />
)
}else{
return ({this.props.children})
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.