![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React 手写组件库
文章平均质量分 74
React 手写组件库
乐闻x
一个不安分的前端,还搞过两年后端开发
展开
-
使用React实现随机颜色选择器,JS如何生成随机颜色
作为前端开发人员,我们知道HTML接受 RGB、HEX、HSL三种格式的颜色。虽然是不同的格式,但是它们的本质都是。在标签功能中,由于有「背景色」属性,每次新增标签时都为选择哪种颜色犯难。因为RGB、HEX、HSL 本身都是数字,那么通过生成随机数并组装成符合格式要求的数字,也就达到预期。这是标签背景随机颜色选择器的React组件代码,实现是非常简单的,可以直接复制使用。,提取一个通用的随机颜色生成工具,并基于React框架封装随机颜色选择器组件。对于标签功能,感兴趣的可以访问。原创 2023-12-15 23:11:54 · 503 阅读 · 0 评论 -
超详细教程:使用React实现动态轮播图
轮播组件是常见的一种方式,用来展示图像、信息或者是广告。我们可以使用React来创建一个轮播组件,并且利用其中的State和effect Hook来创建一款动态的、可以自动播放的轮播组件。以上就是通过React实现轮播图的方法。这个轮播图基于React的**useState和useEffect实现,利用了transform和transition**来呈现滑动的动画效果。原创 2023-12-14 22:38:10 · 1418 阅读 · 0 评论 -
实现一个Switch开关组件只需要一个div?详细记录Switch组件开发过程
最终效果图实现逻辑一、switch容器// html <div className="dumbo-switch"></div> // css .dumbo-switch { height: 22px; width: 44px; border: 1px solid; border-radius: 100px; border: 1px solid #cccccc; cursor: pointer; }二、switch i原创 2021-12-13 23:42:34 · 788 阅读 · 0 评论 -
我用一行代码搞定了重叠头像组
最近项目有个新需求,需要把用户的头像水平排列并且重叠。本来以为挺麻烦的,刚开始还想着要用JS去计算每一个头像需要位移的距离。其实这个需求只需要一行代码就能搞定。原创 2022-11-07 23:51:18 · 732 阅读 · 0 评论 -
基于React实现日历组件详细教程
本文详细的记录了一个最简单的日历组件的实现过程,感兴趣但是之前还没有实现过日历的同学可以直接下载代码试试,希望对大家有所启发。也可以直接访问看成品效果。由于设计师脑洞的千变万化,日历的展现形式也各不相同,后续我还将继续记录更多形式的日历实现过程,感兴趣的同学敬请期待。原创 2023-08-23 17:46:31 · 2638 阅读 · 0 评论 -
基于React实现:弹窗组件与Promise的有机结合
日常开发工作中总有一些能够优化的步骤和流程,我们能够多思考一下,转变思路,就能够让我们的代码更加赏心悦目。原创 2023-09-05 12:13:25 · 812 阅读 · 0 评论 -
基于React实现无限滚动的日历详细教程,附源码【手写日历教程第二篇】
最常见的日历大部分都是滚动去加载更多的月份,而不是让用户手动点击按钮切换日历月份。滚动加载的交互方式对于用户而言是更加丝滑和舒适的,没有明显的操作割裂感。那么现在需要做一个这样的无限滚动的日历,前端开发者应该如何去思考和代码实现呢?下面我会详细的介绍实现思路和步骤。原创 2023-08-23 22:33:32 · 1064 阅读 · 0 评论 -
如何封装React无限滚动加载列表组件【含源码】
由于需要考虑后端接口的性能问题,我们在请求业务数据列表的时候并不能直接请求全量数据。所以我们在请求数据时常见的方式是做分页查询。对于前端交互而言,我们需要考虑如何优雅的让用户触发请求下一页数据的接口。对于移动端,滚动加载的交互是更加优雅的处理方式。对于滚动加载的能力,我们需要一个公共的组件来实现代码的复用,避免每次都要为滚动加载的需求伤脑筋。原创 2023-05-19 22:15:05 · 848 阅读 · 0 评论