Table-dnd-tree代码分析

原作者仓库：table-dnd-tree-5achinJani

参考文档：基于react的拖拽组件库react-beautiful-dnd API参数简易说明-天心天地生

摘出了关键文件加了注释-码云仓库

IndexPage.tsx

1. 引入了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属性分析

拖拽组件代码分析