实现本要求的前提是多层级的树可以拖动,并且样式有一定的要求
1.antd的tree
antd提供了tree组件来实现多层级的层次结构,但是扩展性相对比较有限,关键的代码如下所示
import React from "react";
import { Tree, Icon, Switch } from "antd";
const { TreeNode } = Tree;
const data = [{
key: 1,
title: '父亲',
children: [{
key: 2,
title: '孩子一',
children: [{
key: 5,
title: '孙子一',
}]
}, {
key: 3,
title: '孩子二'
}, {
key: 4,
title: '孩子三'
}]
}];
class Demo extends React.Component {
state = {
showLine: true,
showIcon: false
};
onShowLineChange = (showLine) => {
this.setState({ showLine });
};
onShowIconChange = (showIcon) => {
this.setState({ showIcon });
};
renderTreeNodes = data =>
data.map(item => {
if (item.children && item.children.length) {
return (
<TreeNod