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

复制代码

效果

踩坑

• 已经排过序的图片无法拖动，未排序的图片拖动报错

• 页面一加载就报错，无法拖动图片

解决：这两种报错的解决方法都是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

• SortableItem

官方链接

github.com/clauderic/r…