react 封装树形组件

TreePage.js

import React, { Component } from "react";
import TreeNode from "../components/TreeNode";
const treeData = {
  key: 0, //标识唯一性
  title: "全国", //节点名称显示
  children: [
    //子节点数组
    {
      key: 6,
      title: "北方区域",
      children: [
        {
          key: 1,
          title: "黑龙江省",
          children: [
            {
              key: 6,
              title: "哈尔滨",
            },
          ],
        },
        {
          key: 2,
          title: "北京",
        },
      ],
    },
    {
      key: 3,
      title: "南方区域",
      children: [
        {
          key: 4,
          title: "上海",
        },
        {
          key: 5,
          title: "深圳",
        },
      ],
    },
  ],
};

export default class TreePage extends Component {
  render() {
    return (
      <div>
        <TreeNode data={treeData} />
      </div>
    );
  }
}

TreeNode.js

import React, { Component } from "react";
// import classnames from "classnames";
import { DownOutlined, RightOutlined } from "@ant-design/icons";
import "../static/css/basic.scss"
export default class TreeNode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
  }
  render() {
    const { title, children } = this.props.data;
    const open = this.state.open;
    const hasChildren = children && children.length > 0;
    return (
      <div>
        <div
          className="treeTitle"
          onClick={() => {
            this.setState({ open: !open });
          }}
        >
         { !open && <RightOutlined />}
          {open &&<DownOutlined />}
          <span>{title}</span>
        </div>
        {hasChildren && open && (
          <div className="treeChildren">
            {children.map((item) => {
              return <TreeNode data={item} key={item.key} />;
            })}
          </div>
        )}
      </div>
    );
  }
}

basic.scss

.treeChildren{
 margin-left: 50px;
}