![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
分享react使用的各种奇淫技巧。
前端攻城狮J
用代码改变命运
展开
-
如何手写一个react异步组件
手写一个简版的react.lazy、Suspense功能原创 2023-02-24 11:29:04 · 280 阅读 · 0 评论 -
小程序如何实现手写签名(Taro-hook)
小程序中如何实现手写签名,复制粘贴即可使用原创 2022-10-18 15:50:30 · 1388 阅读 · 1 评论 -
create-react-app使用v5版本创建项目,运行输出很多webpake日志
昨天自己准备做一个react的demo,复习一下。使用了create-react-app v5版本,发现会莫名的出现一堆webpake日志经过排查发现是因为create-react-app v5导致的问题,你也可以手动修改**“react-scripts”: "5.0.0"为4.0.3版本**,可以暂时解决日志输出的问题。但是不建议这么做。因为后期会出现一些不可控的bug,例如eslint的配置。猜测出现日志输出的问题是因为webpack 不再填充节点内置包导致的。可以参考github建议还是原创 2022-03-03 10:05:57 · 565 阅读 · 0 评论 -
React实现快速搜索并且关键字高亮
需求:点击搜索按钮,弹出模糊匹配列表。下拉列表选择选项,点击后跳转相应页面关键字所在地。思路:利用正则从列表匹配到关键词,再使用标签包含关键词,给标签添加color属性,使用react富文本渲染方式进行渲染js内容: /** * 关键字变色 * @params content 内容 * @params keyword 关键词 * @params tagName 标签名 */ warpTag(content, keyword, tagNa原创 2021-12-29 09:40:57 · 2534 阅读 · 0 评论 -
Taro 、React (hook)移动端 中怎么实现列表list左滑删除
应用场景:在项目列表(List)中左滑,删除 || 取消关注当前项实现方式使用移动端触摸事件ontouchstart、ontouchmove、ontouchend; + SCSS移动端事件详解:事件详解布局css部分.slide-item { width: 100vw; overflow: hidden; line-height: 48px; height: 160px; text-align: center; margin-bottom: 20p原创 2021-11-15 16:48:21 · 1425 阅读 · 0 评论 -
react 脚手架打包不生成 sourceMap 的解决方案
1、过程那么首先说下,为什么我需要这个需求。在前端打包中,如果生成sourceMap 无形之中增加了打包以后的文件的体积,有时候项目需求就是,轻量级,所以对于这样的项目而言,sourceMap 就有点多余了。其实无非就是在某个打包的配置文件里面,有个 sourceMap 的属性,将属性设置为 false 就 ok 了,然后这个问题就解决了。2、解决方案1、稍微懂点英语的人就能看出来,这就是判断要不要使用 sourceMap 的参数了。如果结果为 true,那么在打包的过程中,就会生成 source原创 2021-07-26 17:40:16 · 1348 阅读 · 0 评论