Table-dnd-tree代码分析
原作者仓库:table-dnd-tree-5achinJani
IndexPage.tsx
-
引入了Fragment:子元素需要父元素包裹起来,但不需要渲染父元素,就可以使用Fragment。
只占位,不渲染。
常用的<></>是Fragment的语法糖,<></>不能接受键值或属性。
import React, { Fragment } from "react";
import Container from "react-bootstrap/Container";
import { TableContainer } from "../containers/TableContainer";
export const IndexPage = () => {
return (
<Fragment>
<Container fluid>
<TableContainer />
</Container>
</Fragment>
);
};
TableContainer.tsx + utils/index.ts
拖拽功能引入了react-beautiful-dnd组件库(查看例子)。react-beautiful-dnd包含三个组件:
- DragDropContext:用于包装拖拽根组件,Droppable和Draggable都要包裹在里面。不支持嵌套,必需设置onDragEnd钩子函数(拖拽后数组重排在这里进行)
- Droppable:用于包装接收拖拽元素的组件,使组件能够被放置。
可以作为Draggable和DragDropContext的子组件。 - Draggable:用于包装需要拖动的组件,使组件能够被拖拽。
可以被拖放到Droppable上
必须始终包含在Droppable中
可以对一个Draggable在其父Droppable内重新排序或者移动到另一个Droppable中
每个Draggable都有一个拖动句柄。拖动句柄是用户为了拖动Draggable而与之交互的元素。一个拖动句柄可以是Draggable元素本身或者是Draggable的子元素。
react-beautiful-dnd属性分析
拖拽组件代码分析