Antd组件库，利用Menu组件模拟一个简单Tree组件

---

当前工作中，前端的主要技术栈用是vue。

那React怎么办呢？总不至于把他扔在墙角吧！

只能在一些很小的项目上，也只有自己一个前端的时候，悄悄的上React。

当然，React项目UI组件还是最喜欢的Antd了。

---

近期的一个项目，就这么上了React和Antd，然后当中有一棵树组件。

简单看一下树组件的设计图吧！

看了设计图，就发现一个小问题。

Antd组件库当中的Tree组件子节点的向右缩进是通过父节点的padding-left实现的。那么就这么尴尬了，子节点的选中状态背景色没办法占满整行。如下图：

这种情况最简单的解决方案当然是跟设计师去协商，修改设计图，让设计图的选中状态符合Antd的Tree组件的选中状态。

然而，就真的没有别的办法了？

再仔细看看Antd的各个组件。你会发现，有那么一个组件Menu（甚至不止一个组件，再看看Collapse），与当前的设计图非常相似。是不是瞬间活力满满？

下面我们就用Menu来简单重构一下当前的