美文网首页
使用react动画遇到问题的记录

使用react动画遇到问题的记录

作者: 再见田园犬 | 来源:发表于2016-06-17 21:52 被阅读242次
<ReactCSSTransitionGroup transitionName="adding-tag"   transitionEnterTimeout={300}   
                transitionLeaveTimeout={300}>
    {    
        this.props.curTags.toJS().map((item, index)=> {        
            return (            
                <div className="tag-item" key={item} onClick={this.handleDeleteTag.bind(this,item)}>                
                <span className="tag-item-text">
                    {item}
                </span>
              </div>        
          )   
       })
}
</ReactCSSTransitionGroup>

如果使用key={index}会导致渲染的异常,如果被删除的项在数组中的位置是第一个,那么删除过程中,项会被移动到数组的末尾,在界面上看就是被移动到了最后面的位置

相关文章

网友评论

      本文标题:使用react动画遇到问题的记录

      本文链接:https://www.haomeiwen.com/subject/cavvdttx.html