当前工作中，前端的主要技术栈用是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. 解决ScrollView中Recyclerview显示不全，滑动不流畅的问题

    这个问题经常会碰到,看了下网上关于这个问题的解决方案,有很多都是复制粘贴的,并不能根本解决问题 比较有效的一种方案是在Recyclerview的外层套一个RelativeLayout 然后设置recy ...

  2. Python 函数lambda(), filter(), map(), reduce()

    1 filter filter(function, sequence):对sequence中的item依次执行function(item),将执行结果为True的item组成一个List/String ...

  3. Python 中操作 MySQL

    引入模块 在py文件中引入pymysql模块 from pymysql import * Connection 对象 用于建立与数据库的连接 创建对象:调用connect()方法 conn=conne ...

  4. based on Greenlets (via Eventlet and Gevent) fork 孙子worker 比较

    Design — Gunicorn 19.9.0 documentationhttp://docs.gunicorn.org/en/stable/design.html#async-workers e ...

  5. 配置nginx支持path_info

    默认情况下,nginx是不支持path_info的,我们需要做些配置让它支持. location ~ \.php(.*)$ { root /var/www/nginx/html; fastcgi_pa ...

  6. 组件基础之动态tab组件

    <template> <div id="demo31"> <p>-----------------组件基础之动态tab组件一---------- ...

  7. c++ Container print

    template<typename Container>void PrintContents(const Container& con) { Container::const_it ...

  8. c++拷贝文件-传统处理异常(学习)

    #include <iostream>#include <stdio.h> using namespace std; int my_copy(const char* src_f ...

  9. XHProf报告字段含义

    Function Name:方法名称. Calls:方法被调用的次数. Calls%:方法调用次数在同级方法总数调用次数中所占的百分比. Incl.Wall Time(microsec):方法执行花费 ...

  10. 安卓运行linux应用程序

    安卓是可以运行linux应用程序的,安卓系统原来就基于Linux.但是安卓已经把linux改头换面了.具体方法是安装Termux软件,然后就可以运行pkg命令安装软件包了,希望可以帮助到大家.