React-Sortable-HOC

简介：一个实现拖放功能的React组件

安装

yarn add react-sortable-hoc

使用

import { SortableContainer, SortableElement } from "react-sortable-hoc";

// 需要拖动的元素的容器
const SortableItem = SortableElement(() => (
		<div className={style.imgContent}>
                    <PictureList/>   //拖动元素
		</div>
	)
);
// 整个元素排序的容器
const SortableList = SortableContainer(() => {
        return <div>
                    <SortableItem
                        key={`item-${index}`}
                        index={index}
                    />
        </div>
    })
 
 // 拖动排序组件
const SortableComponnet: React.FC<Props> = props => {
    ...
    return <div>
        <SortableList
            distance={5}
            axis={"xy"}
            helperClass={style.helperClass}
            onSortEnd={({ oldIndex, newIndex }) => onPicSortEnd({ oldIndex, newIndex })}
        />
    </div>
}

export default SortableComponnet

效果

QQ图片20210429204122.gif

踩坑

已经排过序的图片无法拖动，未排序的图片拖动报错
页面一加载就报错，无法拖动图片

解决：这两种报错的解决方法都是SortableElement 和 SortableContainer 返回组件时外面都要单独在包一个html容器标签, 例子是包了个 <div>

// 需要拖动的元素的容器
const SortableItem = SortableElement(() => (
		<div className={style.imgContent}> // 额外的div
                    <PictureList/>   // 拖动元素
		</div>
	)
);
// 整个元素排序的容器
const SortableList = SortableContainer(() => {
        return <div> // 额外的div
                    <SortableItem
                        key={`item-${index}`}
                        index={index}
                    />
        </div>
    })

批量上传图片多次调用接口导致请求canceled

原因：每次上传图片成功后都会重新渲染一次页面，导致接口canceled
解决：将拖动和上传的组件放在React.FC页面函数组件外面

用到的部分API

SortableContainer | 属性 | 类型 | 默认值 | 描述信息 | | --- | --- | --- | --- | | axis | String | y | 可移动范围（x, y, xy） | | distance | Number | 0 | 设置大于0，点击后多久响应排序效果，在排序之前，可添加其他鼠标事件 | | onSortEnd | Function| | 拖动排序结束后回调函数，一般用于拖动元素数组的重新排序
function({oldIndex, newIndex, collection, isKeySorting}, e) |
SortableItem | 属性 |类型 | 默认值 | 描述信息 | | --- |--- | --- | --- | | index | Number | | 元素的key值 | | disabled | Boolean | false | 限制某些元素不能拖动 |

官方链接

github.com/clauderic/r…