reactjs - If 语句中的 React 动画不呈现
问题描述
我在 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>
)
}
推荐阅读
- php - mysql 5.6.29 选择为子查询访问冲突 1064
- process - 如何在请求 elixir phoenix 中创建批处理
- javascript - 找不到 express.js 文件
- javascript - 如何使用 react 的 this.setState() 作为一个承诺(所以你可以使用 .then())
- windows - 如何使用 clang 创建 Windows 二进制文件
- android - 使用 ACTION_GET_CONTENT 选择文件时返回无效路径
- sqlalchemy - Flask中关系的SQLalchemy UnmappedInstanceError
- curl - 卷曲帖子不起作用,但邮递员工作正常
- java - 引起:android studio中的java.lang.runtimeException
- java - 如何解决比较的一般错误?