记一个react拖动排序中的坑：key

标签：使用   oda   顺序   dash   dex   span   问题   方案   unique   

在做一个基于react的应用的时候遇到了对列表拖动排序的需求。当使用sortable对列表添加排序支持后发现一个问题：数据正确排序了，但是dom的顺序却乱了，找了一会儿原因后发现是因为在渲染数据的时候指定了一个动态的key（map((o,i)=>(<li key={i}></li>))），导致了dom顺序混乱。解决方案有：将数据装入模型的时候生成一个不重复的key，或者使用lodash的uniqueId:

import uniqueId from ‘lodash/uniqueId‘

在指定key的时候调一下：

 <li data={photo} key={uniqueId()} index={j}></li>

记一个react拖动排序中的坑：key

标签：使用   oda   顺序   dash   dex   span   问题   方案   unique   

原文地址：https://www.cnblogs.com/axel10/p/9403794.html