当前工作中，前端的主要技术栈用是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. 蜗牛圈圈-时尚智能的运动计时App

    Duang! 各类运动爱好者的福音来啦! 蜗牛圈圈-最智能的圈速计时助手 扫描二维码下载体验 [产品简介] -蜗牛圈圈是一款专业的圈速计时工具,帮助您获得整个运动过程中的各项数据,保存记录,分享激情. ...

  2. 【原】Python基础-__init__

    #py中,有些名称前后都会加上俩个下划线,是有特殊含义的#在Py中,由这些名字组成的集合所包含的方法称为 “魔法方法”.如果在你的对象中#实现了这些方法的其中某一个,那这些方法会被py自动调用,几乎没 ...

  3. Jmeter Web 性能测试入门 (一)：环境配置 (免安装版)

    去官网下载并安装java jdk8 去官网下载jmeter binaries最新的zip,并解压到某路径下.(注:由于jmeter-server的限制,放置的路径不要太长,路径不要带空格,例如:D:\ ...

  4. js闭包小实验

    js闭包小实验 一.总结 一句话总结: 闭包中引用闭包外的变量会使他们常驻内存 function foo() { var i=0; return function () { console.log(i ...

  5. idea 拉取git新分支

    前面的话: 一不小心,删除了dev的分支,没办法.头头重新克隆了下,但是发现idea的右下角并没有啊,我记得之前遇到过一次 但还是忘记如何操作了,在这记录下,省的下次还得去百度 选中项目-git-fe ...

  6. 指定版本下载yum离线安装包

    #!/bin/bash releasever=7 for i in salt-minion salt-api salt-master docker-ce docker-ce-cli docker-co ...

  7. Sql中truncate，delete以及drop的比较

    相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句(数据定义语言),执行后会自动提交. 不同点: 1. t ...

  8. WebView调用js方法获取返回值的完美解决方案

    在Android项目中我们或多或少会涉及到与js交互的问题,这其中WebView是必须掌握的控件,今天主要说说我们通过WebView调用js方法,然后如何很好的获取返回值.这里我总结了三种方式,大家可 ...

  9. vsCode多选多个元素进行统一修改

    如果你没有修改过vsCode的快捷键那么你可以按住"ctrl+d",然后逐个选中你要修改的元素,选完之后松开,你就可以敲击键盘愉快的修改了...如果你使用了ecliplse快捷键插 ...

  10. python笔记4 内置函数,匿名函数.递归函数 面向对象(基础, 组合,继承)

    内置函数 eval和exec eval :执行字符串中的代码并将结果返回给执行者,有返回值 exec:执行字符串中的代码,往往用于执行流程语句,没有返回值. s1 = '1+2' s2 = 'prin ...