React.js
小灰灰学编程
毕业设计:web、小程序
展开
-
react-virtualized实现行元素不等高的虚拟列表滚动
react-virtualized实现行元素不等高的虚拟列表滚动原创 2024-02-01 10:57:15 · 925 阅读 · 0 评论 -
React中使用LazyBuilder实现页面懒加载方法二
通过懒加载,实现:在初始dom出现在视口内时,替换掉初始dom,渲染真实dom,并取消对该dom的监听,实现只需加载一次,首次加载多少个真实dom,取决于可视区域跟初始dom的高度原创 2024-01-26 11:53:10 · 575 阅读 · 0 评论 -
React中使用LazyBuilder实现页面懒加载方法一
通过懒加载,实现:只有出现在视口内的元素才渲染真实的dom,在视口以外的元素都渲染初始dom,首次加载多少个真实dom,取决于可视区域跟初始dom的高度原创 2024-01-25 11:10:50 · 543 阅读 · 0 评论 -
React中实现行等高的虚拟列表加载滚动
当一个页面中需要接受接口返回的全部数据进行页面渲染时间,如果数据量比较庞大,前端在渲染dom的过程中需要花费时间,造成页面经常出现卡顿现象。需求:通过虚拟加载,优化页面渲染速度。缺点:需要固定好每一行元素的高度原创 2024-01-23 18:35:33 · 614 阅读 · 0 评论 -
react中使用antd的tabs进行标签切换时,销毁dom
最近接的一个需求,需要将之前通过点击按钮触发跳转到的另外一个页面,通过跟点击按钮的页面融合,通过tab的形式进行切换。【由于业务方面的需求,两个页面的逻辑代码部分存在一致性(经多年长期沿用下来的代码)】原创 2023-12-12 16:59:44 · 1015 阅读 · 0 评论 -
encodeURIComponent对url参数进行编码
当我们拼接在url上的参数存在某些特殊字符时(&、%、#、?、/ 等),getHrefParam()并不能满足我们的需求,例如:url后面的参数是:?window.location.search方法获取的参数被“#”截断。解决方法:encodeURIComponent对参数进行一次编码即可。原创 2023-10-26 18:05:08 · 366 阅读 · 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 · 340 阅读 · 0 评论 -
React中使用refs获取子组件的state
React中使用refs获取子组件的state原创 2023-06-08 15:31:15 · 631 阅读 · 0 评论 -
react中ref的理解与简单运用
react中ref的理解与简单运用原创 2023-05-27 16:16:47 · 443 阅读 · 0 评论 -
React子组件没有随父组件更新问题的解决
React子组件没有随父组件更新问题的解决原创 2022-12-01 17:57:20 · 2007 阅读 · 0 评论 -
React+antd实现table动态列添加删除
React+antd实现table动态列添加删除原创 2022-11-23 17:19:17 · 4393 阅读 · 7 评论 -
React-router实现简单的路由跳转
React-router实现简单的路由跳转原创 2022-10-19 14:58:36 · 906 阅读 · 0 评论 -
React的useEffect用法记录
React的useEffect用法记录原创 2022-07-02 22:25:41 · 436 阅读 · 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 · 766 阅读 · 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 · 1021 阅读 · 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 · 691 阅读 · 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 · 791 阅读 · 0 评论