2020-09-17 实现react-beautiful-dnd+多层级树收缩展开（类比antd的tree）

实现本要求的前提是多层级的树可以拖动，并且样式有一定的要求

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 (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.key} {...item} dataRef={item} />;
    });

  render() {
    const { showIcon, showLine } = this.state;
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          showLine:{" "}
          <Switch checked={showLine} onChange={this.onShowLineChange} />
          <br />
          <br />
          showIcon:{" "}
          <Switch checked={showIcon} onChange={this.onShowIconChange} />
        </div>
        <Tree
          showLine={showLine}
          showIcon={showIcon}
          defaultExpandedKeys={[1, 2, 3, 4, 5]}
        >
          {this.renderTreeNodes(data)}
        </Tree>
      </div>
    );
  }
}

export default Demo;

2.自定义实现多层级树

思路：

1.首先将后端返回的平铺列表组装成树的结构，然后根据是否存在子级进行响应的渲染

2.对于存在子级的结合展开收缩状态展示是收缩还是展开的icon

3.对收缩和展开的icon点击事件分别做相应的处理

4.最后加上对应的全部展开和收缩的事件即可