![在这里插入图片描述](https://img-blog.csdnimg.cn/c7c0f090b02f4f28a4e477e701bd437e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQ3VwaWQ1MTA=,size_12,color_FFFFFF,t_70,g_se,x_16)
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 { 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;
}