[英]React animation inside If statement does not render
我在 if 塊中有一個反應動畫組件,如下所示;
import { CSSTransitionGroup } from 'react-transition-group'
......
......
......
......
render() {
return(
<div className="App"
{
this.state.isloading
? <div className="loader"></div>
: <CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={1000}
transitionLeaveTimeout={750}
>
{this.state.hot_list.length > 0
? <Displaycont hot_list={this.state.hot_list} />
: null}
</CSSTransitionGroup>
}
</div>
)
}
這不會僅渲染組件“Displaycont”的動畫。
如果我刪除 If 塊,動畫將按預期呈現。 我的樣式如下所示;
https://reactjs.org/docs/animation.html#low-level-api-reacttransitiongroup
任何想法我可能做錯了什么?
CSSTransitionGroup
應該總是被掛載,並且只有它的孩子必須有條件地呈現。
我不確定原因,但所有 React 文檔示例都是這樣做的。 我想,這是因為CSSTransitionGroup
生命周期方法及其工作方式。
但是,您可以這樣做:
render () {
const { isLoading, hot_list } = this.state
return (
<div className='App'>
{ isLoading ? <div className='loader' /> : null }
<CSSTransitionGroup
transitionName='example'
transitionEnterTimeout={1000}
transitionLeaveTimeout={750}
>
{ isloading && hot_list.length > 0 ? <Displaycont hot_list={hot_list} /> : null }
</CSSTransitionGroup>
</div>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.