使用react動畫遇到問題的記錄

<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}會導致渲染的異常,如果被刪除的項在數組中的位置是第一個,那么刪除過程中,項會被移動到數組的末尾,在界面上看就是被移動到了最后面的位置

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,923評論 18 139
  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,270評論 0 4
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,268評論 25 708
  • 你說過怕被同化,也說要做最優秀的自己,也許就是你的自信以及熱愛生活導致很多人的喜歡。 那么,從今天起,我試著不去喜...
    佟言佟語閱讀 134評論 0 0
  • 從移動端興起,主流設計風格定型,再到Uber、Vine等現象級APP的崛起,移動端的APP設計直到現在才漸入佳境。...
    shanghaicity88閱讀 856評論 0 7