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

2016-06-17  本文已影响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}会导致渲染的异常,如果被删除的项在数组中的位置是第一个,那么删除过程中,项会被移动到数组的末尾,在界面上看就是被移动到了最后面的位置

上一篇 下一篇

猜你喜欢

热点阅读