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

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

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

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

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

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

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

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

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

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

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

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

Antd组件库，利用Menu组件模拟一个简单Tree组件的更多相关文章

  1. asp.net mvc4+mysql做一个简单分页组件（部分视图）

    在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...

  2. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

  3. 【转载】COM 组件设计与应用（四）——简单调用组件

    原文:http://vckbase.com/index.php/wv/1211.html 一.前言 同志们.朋友们.各位领导,大家好. VCKBASE 不得了, 网友众多文章好. 组件设计怎么学? 知 ...

  4. Android的NDK开发(2)————利用Android NDK编写一个简单的HelloWorld

    1.Android NDK简介 NDK全称为native development kit本地语言(C&C++)开发包.而对应的是经常接触的Android-SDK,(software devel ...

  5. 利用HttpClient写的一个简单页面获取

    之前就听说过利用网络爬虫来获取页面,感觉还挺有意思的,要是能进行一下偏好搜索岂不是可以满足一下窥探欲. 后来从一本书上看到用HttpClient来爬取页面,虽然也有源码,但是也没说用的HttpClie ...

  6. 模拟一个简单的tomcat

    目录 简单处理 每个请求一个线程 模拟tomcat 参考 简单处理 // 客户端和服务器的通信,说到底就是两个数据的传输, // 客户端发送inputStream给服务器,服务器回复 // outpu ...

  7. 理解与模拟一个简单web服务器

    先简单说下几个概念,根据自己的理解,不正确请见谅. web服务器 首先要知道什么是web服务器,简单说web服务器就是可以使用HTTP传输协议与客户端进行通信的服务器.最初的web服务器只能用来处理静 ...

  8. 使用Socket模拟一个简单的Webservice调用

    webservice是对socket的一个封装,让远程调用调用变得更加简单,那么使用socket究竟有多么麻烦呢?来看看. 做一个简单的天气查询: 服务端: public class SocketSe ...

  9. 【阿菜做实践】利用go语言写一个简单的Pow样例

    本篇博客的主要内容是用go写一个简单的Proof-of-Work共识机制,不涉及到网络通信环节,只是一个本地的简单demo.开发IDE用的是JB Golang. 整个项目的文件结构如下: PoWdem ...

随机推荐

  1. vue中书写JSX一些坑-特殊属性名

    举例说明, T1和T2引用Sub时, key2会出现在props以及data.attrs中, 而key则在data中 const Sub = ({data, props}) => { conso ...

  2. 黑马vue---37-38、vue实例的生命周期

    黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...

  3. 静态库和动态库的区别和win平台和linux平台代码实现

    静态库和动态库的区别   什么是库 库是写好的,现有的,成熟的,可以复用的代码.现实中每个程序都要依赖很多基础的底层库,不可能每个人的代码都从零开始,因此库的存在意义非同寻常. 本质上来说,库是一种可 ...

  4. busybox中memdev的使用方法

    busybox中已经集成了devmem工具,你可以配置busybox即可. 在busybox的杂项中找到: CONFIG_USER_BUSYBOX_DEVMEM: devmem is a small ...

  5. vi下如何配置自动更新标签(tags)?

    答: 在~/.vimrc中写入以下内容即可: au BufWritePost *.c,*.cpp,*.h silent! !ctags -R & 参考资料: 一键打造vim ide

  6. 007-springboot 控制台中文乱码

    处理方式 1.FIle encoding 设置为UTF-8 2.-Dfile.encoding=UTF-8 配置tomcat 的的VM启动参数:-Dfile.encoding=UTF-8 3.idea ...

  7. List的remove方法里的坑

    今天遇到一件怪事,用一个ArrayList添加了一个对象,再调用ArrayList的remove方法删除该对象,当然这时对象是数据库里查出来的,但内容绝对是一样,却发现remove失败了.演示一下,这 ...

  8. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_20-CMS前端页面查询开发-页面原型-页面内容完善

    访问swaggerUI的接口 得到返回的json数据,就是我们页面上要显示的数据 复制到页面的数据这里 [ { "siteId": "5a751fab6abb5044e0 ...

  9. [C++]Yellow Cards - GYM - 102348A(Practice *) - CodeForces

    1 Problem Description Problem The final match of the Berland Football Cup has been held recently. Th ...

  10. React Native npm第三方报错

    添加npm install第三方报错: 使用: yarn add 组件名称 注意: 这里不需要像npm的--save