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

踩坑

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

image.png

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

QQ图片20210426214155.png

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享