![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 83
归来巨星
一名致力于新技术的推广与优秀技术的普及的前端开发工程师。个人开源项目:TinkerBell-ui,TinkerBell-ui-react,TinkerBell-ui-next,react_ruoyi_admin,Tinkerbell-Blog等。
展开
-
dumi 如何使用?一文教你使用,高效写出你的博客、组件库文档
关于对dumi的介绍我们就可以简单的理解为快速开发文档的一种便捷开发工具,里面囊括了多种配置,我们不需要再去手动的编写组件这种,所以为我们开发组件库文档,官方文档,个人博客介绍这种网站提供了很便捷的帮助。有兴趣的同学也可以去看下这套手搭组件库文档,满满的😭血泪史😭。现在dumi推出了2的版本,当然我们在这里已经引入了dumi1的版本,所以此文我们针对dumi1进行简单介绍,2的版本,我们在后续的升级中会有所体现,文档地址参照如下。dumi1官方文档✨ 每天创作一点点✨ 开心快乐一整天。原创 2022-12-09 14:06:39 · 6322 阅读 · 1 评论 -
React造轮子(reacthook实现一套自己的组件库)轮子公开课——第六课【Checkbox、CheckboxGroup】组件
有兴趣的同学可以先着手看源码,之前写的一系列开源组件库项目(有帮助的同学也帮忙点个star👍)名称官网githubhttphttps—https—https✨每天创作一点点✨开心快乐一整天✨美好一天又一天httpshttpshttps。...原创 2022-07-25 14:04:50 · 1134 阅读 · 0 评论 -
React造轮子(reacthook实现一套自己的组件库)轮子公开课——第五课【Radio、RadioButton、RadioGroup】组件
手动实现一个前端 radio 组件,原来实现一个radio组件这么简单原创 2022-07-14 10:43:43 · 1069 阅读 · 15 评论 -
React-Hook 轮子公开课(从零开始)用最基础的方式写出一个简单的组件库——第四课【Link】文字链接组件
有兴趣的同学 可以先着手看源码,之前写的一系列开源组件库项目(有帮助的同学也帮忙点个star👍)其实谈到文本链接组件,我们可以参考向element、antd这些其实可以把这些看成是一个个的文字按钮组件,只不过底层就是使用a标签去实现的,又或者,我不想让其拥有a标签的href属性的话,底层完全就可以使用span标签来包裹文本,总的来说其实就相当于对文本进行了一个封装,我们可以通过属性进行判断到底是一个链接组件,还是一个单纯类似按钮功能的文本样式组件,简单的来讲我们只需要对其进行一个颜色封装即可,当然主要的也.原创 2022-07-12 15:16:42 · 422 阅读 · 10 评论 -
React-Hook 轮子公开课(从零开始)用最基础的方式写出一个简单的组件库——第三课【Row、Col】布局组件
有兴趣的同学 可以先着手看源码,之前写的一系列开源组件库项目(有帮助的同学也帮忙点个star👍)想到布局组件,其实我们最先想到的也就是栅栏,最早接触前端的时候、或者最早接触ui组件的时候,我们首先是不是就先想起来了 Bootstrap 里面的栅栏呢?其实功能类似,底层的话采用的是什么功能呢?也就是@media媒体查询,利用的其实也就是浏览器的分辨率监听,实现了对应的class样式变更,从而达到了一个分割布局的这么一个效果,主要也是捋清我们怎样去写这个代码:3.2、Row / index.scss3..原创 2022-07-12 14:17:42 · 1126 阅读 · 5 评论 -
React-Hook 轮子公开课(从零开始)用最基础的方式写出一个简单的组件库——第二课【Button】组件
有兴趣的同学 可以先着手看源码,之前写的一系列开源组件库项目(有帮助的同学也帮忙点个star👍)提到 button 组件,这几乎可以说是一个组件库中的重中之重,基本上很多的时候我们都需要用到 button 来进行一系列的 dom 操作,时间执行,用户与浏览器之间进行交互不免得就少不了 button 按钮,那么我们先捋清楚一个思路这个 button 该怎么去写?3.2、index.scss3.3、variables.scss(这里的文本样式是参考的 bin-ui )四、效果呈现至此效果实现当然.原创 2022-06-29 11:14:23 · 444 阅读 · 10 评论 -
React-Hook 轮子公开课(从零开始)用最基础的方式写出一个简单的组件库——第一课【Icon】组件
React-Hook 轮子公开课(从零开始)用最基础的方式写出一个简单的组件库——第一课【Icon】组件>>>关于组件库的话,有关注到我的朋友大家其实也都清除,我这边其实在之前也有讲解过,零零散散的记录过一些有关于组件疑惑点、像正常我们去开发一个项目,类似现在直接用一些的 js 框架,很自然就忽略掉了一些问题点.........原创 2022-06-08 16:27:46 · 523 阅读 · 3 评论 -
(扩展 vue 思维)使用 React 构建一个轮子(LoadingBar加载组件)让 useState 挂载 ref 实例,函数外部 js 调用实例 ref.useState 实现子组件更新
文章目录一、组件概述、使用场景描述(Vue2版本)1、思维,及实现方式描述2、main.vue3、index.js二、组件构思(react版本)1、思考如何挂载组件问题2、函数式编程,其中没有类的概念,没有this,如何在外部调用实例方法?3、使用 React.createRef() 获取一个ref实例4、index.tsx5、index.scss6、引入调用及功能实现一、组件概述、使用场景描述(Vue2版本)1、思维,及实现方式描述先上一个图,这边的ui库是我这边之前使用vue2版本构建的一个组件原创 2022-03-23 14:14:54 · 1864 阅读 · 21 评论 -
scss实用小技巧 循环+自定义函数的使用,学会它构建组件轮子工程时轻松 N+ 倍
文章目录使用scss循环样式代码,减少代码量1、首先定义一个scss变量用于存储所有的type类型2、其次定义一个scss自定义函数用于 return 对应的数据变量类型3、最后也就是对应type类型所展示的代码4、完整代码+对应react代码及呈现效果使用scss循环样式代码,减少代码量1、首先定义一个scss变量用于存储所有的type类型$type:('success', 'primary', 'danger', 'warning', 'info', 'default');2、其次定义一个sc原创 2022-02-07 14:28:25 · 3153 阅读 · 1 评论 -
react如何实现在网页中全屏操作?
1、utils.ts文件var document: any = window.document;export function requestFullScreen(element: any) { var requestMethod = element.requestFullscreen || element.webkitRequestFullscreen || element.msRequestFullscreen || element.mozRequestFullScreen; if (req原创 2021-11-17 15:51:49 · 1858 阅读 · 3 评论 -
React 表格内自定义组件不进行实时更新,采用更新key方式实时更新组件,以及直接变更开关 defaultChecked 为 checked 状态实现表格组件更新
文章目录一、使用useState变更表格数据,表格内的开关组件并不会更新组件?二、使用组件唯一 key 实现每刷新一次表格,key值都会变更,从而实现组件更新的功能。三、变更 defaultChecked 为 checked 实现自定义组件的监听更新。一、使用useState变更表格数据,表格内的开关组件并不会更新组件?首先我们可以看一下代码,我在这边是采用的 defaultChecked ,也就是组件初次的默认值进行数据变更但是不免得会有一个问题就是,表格内的组件只在第一次加载时是对的,当我变更原创 2021-10-18 11:09:19 · 1250 阅读 · 12 评论