Halcyon.-CSDN博客

原创【css布局】左右分布的导航菜单存在二级菜单的高度设置问题

在我们写菜单的时候，经常会在css用到中用到’height:100%‘这个属性。这个属性在一级菜单中使用没有问题，从父级元素上一层层传递，渲染准确。如果有二级菜单的存在，还传递’height:100%’，可能出现菜单高度不贴合底部的情况。先上图：出现这个bug的时候我在网上看了很多博客，总结的解决的方法有这几种：1、position:absolute：定义了后发现，虽然位置上没有改变，但是设置top,bottom这些属性没有改变，就算有改变，如果内容区域过长，菜单不会随着内容区域的变长而变长2、ja

2021-01-20 11:22:15 807

原创【React】HOC

在网上针对HOC的深度好文很多，此文仅写给自己，一是记一记笔记，加深印象，二来也想谈谈自己的想法。简而言之，HOC是对基础组件的再次包装，它可以劫持props、更改render，也可以做插件。和装饰器配合将现有的组件在不破坏结构的情况下添加内容，它也是一种设计模式，就像JS的工厂模式一样。将逻辑抽出来灵活复用。如何使用呢？HOC有很多方式，这也是我学习了HOC迟迟不动手写博客的原因（过第一遍的时候一脸懵逼）先说最基础的方式吧。首先，写个简单的基础组件：import React from 'react'

2020-09-29 12:29:48 220

原创【Formily+Antd】Select及联的做法

前提：Formily:整体用SchemaForm，其实表体用Form也可以，只是写法有微小区别，思路是一样的。数据结构：返回的数据结构大约是这样的：content:[{ children:{ children:{ ... } ... } ... }{...}...]实现效果：类似三个Select先选省，再选市，最后选区。在父级选择后，才会加载出子集，且父级发生变化后，子集会作出不同的变化且子集初始选择清空。类似下图思路和碰壁

2020-09-28 11:53:16 2751

原创【React】ref

这个功能用得比较少，官网也不推荐频繁使用，主要建议在这三个条件下使用：管理焦点，文本选择或媒体播放。触发强制动画。集成第三方 DOM 库。因为现在代码有class写法和hook写法，ref在react中也有两种写法，但在此之前需要把ref的使用情况说一说（该文不详细讲ref和HOC，但是有一点，如果ref用于HOC，仅转发HOC最外层的信息）。刚刚接触ref的时候我有两个疑问1、父子组件可以通过props相互传值，为什么要用ref？2、官网或者其他博客大多数都是说怎么读到转发出来的ref，如果

2020-09-17 20:43:21 259

原创【React-Hook】学习心得

官网说的，即使Hook出来，也不会替代Class，但是作为一名合格的程序媛，是需要不断学习的，这篇博客主要写给自己，按照自己理解的思路来的，当于做了个笔记。一提到Hook，第一反应就是useState和useEffect，但是在记录这两个关键词之前，得先说说整体的变化。整体由Class的写法变成了函数的写法import React from 'react';function Home() {...}export default Home 当然，也可以import React from

2020-09-16 16:39:57 111

原创【eventEmitter】React轻量全局传值工具

最近解除到一全局传值的神器，记录一下。eventEmitter工作原理，是添加一个作用于全局的监听器，全局也可以调用。即使是不存在嵌套的组件，大大节约了开发时间。安装：npm install fbemitter //oryarn add fbemitter;引用：import { EventEmitter } from 'fbemitter'; var emitter = new EventEmitter();在实际使用中，实例化可以提出来单独作为引用文件：import { Even

2020-09-16 00:23:04 959

原创【echars】y轴值不准确的问题

在画图的时候遇到一个很难描述但是很具体的一个问题：我是用的柱状图，画图的时候y轴的数据普遍比较小，就1、2之类，在引入的时候在y轴上对应的数字没错，但是对应数字之间有很多多余的数字，如图所示这个问题在网上找了很久没有找到答案，最后在文档中翻到用interval可以解决，但是文档不推荐使用，可能是因为美观的问题吧。在代码中添加配置：效果如下：...

2020-08-31 11:05:32 466

原创【React】浅析Redux

Redux在我看来，是和Vuex一样的存在，是为了跳出继承传值的条框，方便组件之间通信的一个方法。同时，它也有自己触发的体系。首先还是看看Redux的流程图吧：我用文字，描述一下需要用到的API以及经过的点：1、ReactComponents：发起action 和接收store的组件，组件发起action用store.dispath()，接收store返回的信息可以用store.getState()。如果想要实时订阅store变化返回的值，可以用store.subscribe(fn)，其中，sto

2020-08-02 02:29:43 118

原创【AntDesign】巧妙修改Timeline时间轴

修改它也是因为公司的需求，需求如下：第一反应是用Steps，用了之后发现，Steps只能做导航的作用，最多可以做横向的页面切换的节点，纵向的不行，我尝试过往Step中间添加内容，不会渲染。需求中，两个竖向的节点间是有内容的。于是把目光看向了Timeline。在Ant里，Timeline都是以小点作为步骤节点，实现后如下图：现在来改节点：<Timeline style={{ marginTop: 10 }}> <Timeline.Item sty

2020-07-30 22:43:48 8335 1

原创【React】浅谈Context的使用

老样子我们边写小demo边理解context。组件继承顺序：index.js–>home.js–>show.js–>b.js(c.js)在context中，Provider和Consumer有两种定义的方式：1、const { Provider, Consumer } = React.createContext(defaultValue);2、const testContext = React.createContext(defaultValue);<testContex

2020-07-28 22:57:39 174

原创【React】浅析嵌套路由

程序运行环境：React16、react-router-dom这个功能在我看来，最有用的地方在于可以固定不需要重复加载的区域，自定义需要动态的加载的功能模块，功能的实现有点类似于Vue的slot，当然，Vue也有动态路由的功能，这里不赘述。并且这个功能实现并不困难，网上的资料很多直接贴代码或者是笔记，很少直接的讲解，所以我总结出简单的例子，方便理解。照例，首先是我的文件结构。首先说一说我的router.js配置：组件的引用顺序：index.js—>home.js—>show.js(

2020-07-26 19:22:24 422

原创 React16+react-router-dom初步使用心得

本文不讲怎么安装，讲怎么使用。单位做项目用的React，在闲的时候想自己试试，写写小demo练下手。React上手没几天，主要是以前学过，但是后来偷懒用Vue写页面，不知不觉已经React16了，按照记忆的路线，删删改改脚手架的文件夹后，惊讶的发现并不能start，看了看package.json后，更一头雾水。度娘了一下，关于这方面的资料比较少，多数的解释是你看看node_modules的源文件，可以看到XXXXX。。。远水治不了近渴，首要的，是让我的小demo能够运行起来，经过我的多次失败的尝试，总

2020-07-24 16:18:34 403

原创【MongoDB】This server is bound to localhost. Remote systems will be unable to connect to this server.

由于之前写了学习博客，暴露了自己服务器的IP，导致自己的服务器被黑客攻击，隔三差五删我的数据库。终于有一天，不能忍受，想着改一下数据库的接口，修改了配置文件后启动‘mongod’，发现和以前的界面不一样，我的mongo的版本是4.0.17，环境是centOs7，正常可以全局用‘mongo’启动数据库，这个时候不但报错且用mongod手工启动的时候，会有很多警告，其中一条就是这个：不知道怎么...

2020-04-09 19:16:55 4154

Hhalcyon的博客