React封装 列表拖拽排序高阶组件

引言

项目开发中，特别是后台数据管理端，经常需要用到数据列表拖拽排序的需求，又不需要改变原有的数据结构与布局的情况下，使用高阶组件无疑是最好的选择，接下来于小伙伴们分享一下个人经验：

首先咱们给予react-beautiful-dnd插件环境下

yarn add react-beautiful-dnd

实践是检验真理的唯一标准

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

			
				
					{(provided, snapshot) => (
						

							{this.state.children_list.map((item, index) => { // children_list 父组件传递过来的Element
								if (React.isValidElement(item)) { // 判断是否是ReactNode节点
									return (
										
											{(provided, snapshot) => (
												

													{item}
												
											)}
										
									);
								}
								return item;
							})}
						
					)}
				
			

由于组件拖拽排序触发返回新的Element，需要拿去并渲染最新的ReactNode节点

	componentDidUpdate(prevProps) {
		if (!_.isEqual(prevProps.children, this.props.children)) {
			this.setState({ children_list: this.props.children });
		}
	}

用于处理判断的返回样式函数

	const getItemStyle = (isDragging, draggableStyle) => ({
    	userSelect: 'none',
    	...draggableStyle
    });

拖拽触发后重新修改并返回数组数据

	reorder = (list, startIndex, endIndex) => {
		const result = Array.from(list);
		const [removed] = result.splice(startIndex, 1);
		result.splice(endIndex, 0, removed);
		return result;
	};

重要的来了：数据触发排序结束后回调返回当前的数据排序状态

	onDragEnd = result => {
		if (!result.destination) return;
		const items = this.reorder(this.props.dataList, result.source.index, result.destination.index);
		this.props.callBackOrder && this.props.callBackOrder(items);
	};

展示一下使用方式与示例：

	
		{this.state.album_list_item.map((item, index) => this.judgeBackElement(item.module_name, index, item))}
	


	// 判断返回相应的组件
	judgeBackElement = (type, index, data) => {
		if (type == 'theme') return ;
		if (type == 'album_list') return ;
	};

Github react-beautiful-dnd网站：https://www.npmjs.com/package/react-beautiful-dnd