我有一个像这样的简单组件：
var component = React.createClass({
render: function(){
if (this.props.isCollapsed){
return this.renderCollapsed();
}
return this.renderActive()
},renderActive: function(){
return (
<div>
...
</div>
);
},renderCollapsed: function(){
return (
<div>
...
</div>
);
},});
我在想什么,当产权发生了变化,即主动 – >崩溃,或者反过来,我想旧观点“缩水”或“膨胀”顺利以显示新视图.例如,如果它是活动的 – >崩溃,我希望活动UI缩小到折叠UI的大小,并顺利显示它.
解决方法
Rather than conditionally render two different end states of a
component,you could instead
toggle the class on the same
component. You could have active and collapsed classes as follows:
例如：
.active{
-webkit-transition: -webkit-transform .5s linear; // transition of
// 0.5 of a second
height: 200px;
}
.collapsed{
height: 0px;
}
查看this resource的示例
