当前工作中，前端的主要技术栈用是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. httpd Apache服务

    TCP/IP协议 跨Internet的主机间通讯 在建立通信连接的每一端,进程间的传输要有两个标志: IP地址和端口号,合称为套接字地址 socket address 客户机套接字地址定义了一个唯一的 ...

  2. 如何查看appPackage和启动appActivity

    安装apk,模拟器或真机中在前台运行该应用程序,获取appPackage,即应用包名 appPackage:  adb shell dumpsys activity | find "mFoc ...

  3. ubuntu mysql 的安装、配置、简单使用,navicat 连接

    MySQL 的安装 1. 先更新 apt 安装中心: apt update 里面会有默认最新的mysql 的包. 2.安装msyql : sudo apt-get install mysql-serv ...

  4. python中文显示乱码，已经在开头有了coding: utf-8

    乱码原因:因为你的文件声明为 utf-8,并且也应该是用 utf-8 的编码保存的源文件.但是 windows 的本地默认编码是 cp936,也就是 gbk 编码,所以在控制台直接打印 utf-8 的 ...

  5. Uncaught TypeError: l.push is not a function

    layui.use([ 'jquery', 'layer', 'element' ], function() {} 而不是 layui.use( 'jquery', 'layer', 'element ...

  6. Linux下使用 Nginx

    1. 下载Nginx 下载地址 下载完成后,上传到linux服务器,我上传到了 /opt文件夹下. 2. 安装Nginx前的准备 要想使用Nginx需要安装PCRE库和zlib库,否则直接安装Ngin ...

  7. centos 开启关闭网卡

    ifdown ifcfg-enp7s0 关闭网卡 ifup ifcfg-enp7s0 开启网卡

  8. c++ Container print

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

  9. train_faster_rcnn.sh

    #!/bin/bash set -x set -e export PYTHONUNBUFFERED="True" GPU_ID=$1 DATASET=$2 NET=$3 array ...

  10. [C++]数据结构：线性表之顺序表

    1 顺序表 ADT + Status InitList(SeqList &L) 初始化顺序表 + void printList(SeqList L) 遍历顺序表 + int ListLengt ...