![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React.js
小灰灰学编程
毕业设计:web、小程序
展开
-
React的form表单自定义校验规则
React的form表单自定义校验规则原创 2024-06-18 22:07:00 · 600 阅读 · 0 评论 -
实现React的Form表单非受控组件的必填校验提示
实现React的Form表单非受控组件的必填校验提示原创 2024-06-11 14:53:05 · 216 阅读 · 0 评论 -
实现Dropdown下拉菜单监听键盘上下键选中功能-React
实现Dropdown下拉菜单监听键盘上下键选中功能-React原创 2024-05-31 16:03:51 · 472 阅读 · 1 评论 -
react-virtualized实现行元素不等高的虚拟列表滚动
react-virtualized实现行元素不等高的虚拟列表滚动原创 2024-02-01 10:57:15 · 1674 阅读 · 0 评论 -
React中使用LazyBuilder实现页面懒加载方法二
通过懒加载,实现:在初始dom出现在视口内时,替换掉初始dom,渲染真实dom,并取消对该dom的监听,实现只需加载一次,首次加载多少个真实dom,取决于可视区域跟初始dom的高度原创 2024-01-26 11:53:10 · 630 阅读 · 0 评论 -
React中使用LazyBuilder实现页面懒加载方法一
通过懒加载,实现:只有出现在视口内的元素才渲染真实的dom,在视口以外的元素都渲染初始dom,首次加载多少个真实dom,取决于可视区域跟初始dom的高度原创 2024-01-25 11:10:50 · 577 阅读 · 0 评论 -
React中实现行等高的虚拟列表加载滚动
当一个页面中需要接受接口返回的全部数据进行页面渲染时间,如果数据量比较庞大,前端在渲染dom的过程中需要花费时间,造成页面经常出现卡顿现象。需求:通过虚拟加载,优化页面渲染速度。缺点:需要固定好每一行元素的高度原创 2024-01-23 18:35:33 · 755 阅读 · 0 评论 -
react中使用antd的tabs进行标签切换时,销毁dom
最近接的一个需求,需要将之前通过点击按钮触发跳转到的另外一个页面,通过跟点击按钮的页面融合,通过tab的形式进行切换。【由于业务方面的需求,两个页面的逻辑代码部分存在一致性(经多年长期沿用下来的代码)】原创 2023-12-12 16:59:44 · 1277 阅读 · 0 评论 -
encodeURIComponent对url参数进行编码
当我们拼接在url上的参数存在某些特殊字符时(&、%、#、?、/ 等),getHrefParam()并不能满足我们的需求,例如:url后面的参数是:?window.location.search方法获取的参数被“#”截断。解决方法:encodeURIComponent对参数进行一次编码即可。原创 2023-10-26 18:05:08 · 445 阅读 · 0 评论 -
react的table合并行时,出现border-bottom重复问题
的处理,但是由于合并的行恰好能合并到table的最后一行,但是本身不属于最后一个tr,所以不具有该属性,导致td本身的border-bottom跟table的boder-bottom双重渲染。定义一个方法,接收整个list跟当前行的index,通过index截取剩下的list,赋值给newArr数组,for循环newArr数组,判断接下来的元素是否还存在rowSpanNum有值的行信息,如果有,则保持当前td的borderBottom值,如果没有,则当前td的borderBottom为'none'原创 2023-10-26 11:50:25 · 374 阅读 · 0 评论 -
React中使用refs获取子组件的state
React中使用refs获取子组件的state原创 2023-06-08 15:31:15 · 718 阅读 · 0 评论 -
react中ref的理解与简单运用
react中ref的理解与简单运用原创 2023-05-27 16:16:47 · 615 阅读 · 0 评论 -
React子组件没有随父组件更新问题的解决
React子组件没有随父组件更新问题的解决原创 2022-12-01 17:57:20 · 2095 阅读 · 0 评论 -
React+antd实现table动态列添加删除
React+antd实现table动态列添加删除原创 2022-11-23 17:19:17 · 4749 阅读 · 7 评论 -
React-router实现简单的路由跳转
React-router实现简单的路由跳转原创 2022-10-19 14:58:36 · 947 阅读 · 0 评论 -
React的useEffect用法记录
React的useEffect用法记录原创 2022-07-02 22:25:41 · 448 阅读 · 0 评论 -
React中renderProps的使用
index.jsximport React ,{Component} from 'react'import './index.css'export default class A extends Component { render(){ return ( <div className='a'> <h2>我是A组件</h2> {/* render调用原创 2022-03-19 12:00:28 · 786 阅读 · 0 评论 -
React中使用Context进行多层级组件传值
文件结构index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-03-19 00:13:16 · 1056 阅读 · 0 评论 -
React.js兄弟组件的传值通信
在React中,完成兄弟组件之间的通信,要借助pubsub-js库在vs code中,借助yarn进行下载安装yarn add pubsub-js在组件中通过以下语句进行引用import PubSub from 'pubsub-js'订阅消息用法PubSub.subscribe('getData',(msg,stateObj)=>{ console.log('A组件订阅消息了') console.log(stateObj) this.s原创 2022-01-07 18:00:16 · 718 阅读 · 0 评论 -
React中的父子组件之间的传值通信
在父组件中,通过state的方式定义组件的参数进行初始化// 定义App组件的状态值 state = { msg: '我来自父组件', messageA: '', // 接受A组件信息 messageB: '', // 接受B组件信息 }通过import调用子组件// 组件引用import PageA from './components/pageA'import PageB from './components/pageB'在父传子的过程中,只需要在原创 2022-01-07 14:51:16 · 821 阅读 · 0 评论