React
文章平均质量分 53
ZhaoYulin6
这个作者很懒,什么都没留下…
展开
-
React实现在线预览word报告/本地选择报告预览
react在线预览docx文件,并保留格式,包含保留目录调整等样式原创 2024-06-04 16:25:45 · 1342 阅读 · 0 评论 -
js实现遍历文章,生成目录
js数据html文本内容,生成tree数据,实现锚点目录原创 2022-10-26 15:56:11 · 887 阅读 · 1 评论 -
react使用gg-editor编写拓扑编辑器
gg-editor实现图谱以及下载保存列表展示功能原创 2022-10-20 17:26:18 · 1163 阅读 · 0 评论 -
路由跳转问题(浏览器返回replace replaceState)
replace跳转原创 2022-08-10 15:39:36 · 782 阅读 · 0 评论 -
前端埋点-分析用户在线时间
前端埋点,手机端H5页面监听用户行为原创 2022-07-04 17:05:45 · 567 阅读 · 0 评论 -
antd From的系列用法
1.表单赋值(表单回显)方法一定义 const [formSetting] = Form.useForm();赋值useEffect(() => { if (editNowData) { formSetting.setFieldsValue( { id: editNowData.id, description: editNowData.description, link: editNowData原创 2021-07-29 10:59:14 · 523 阅读 · 0 评论 -
creact-react-app的打包相关事宜
1. 关于build之后的路径问题2. 关于build之后的代理问题当前项目路径:相关配置:1.config里的env.js在config里的env.js的92行添加 API_URL: process.env.API_URL || '/'添加在getClientEnvironment方法里面的**.reduce**后方一些列的相关配置位置2.config/webpack.config.js添加生产环境的配置代码A:const shouldUseSourceMap原创 2021-07-14 15:52:22 · 141 阅读 · 0 评论 -
react实现列表向上自动滚动(二:hooks写法)
import React, { useState, useEffect, useRef } from 'react'const MarqueeBox = (props) => { const [data, setData] = useState([]); //滚动的数据 const [step, setStep] = useState(1) //滚动距离 const [top, setTop] = useState(0) //滚动距离 const [scro...原创 2021-05-31 17:26:15 · 1714 阅读 · 0 评论 -
中国标准时间、2021-01-11T09:49:43.000+0000等各种时间的转换、各种时间处理
1.将中国标准时间转换成yyyy-xx-nn aa-bb-cc中国标准时间:Thu May 12 2019 08:00:00 GMT+0800 (中国标准时间)var d = new Date('Thu May 12 2019 08:00:00 GMT+0800 (中国标准时间)'); d=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes()原创 2020-11-07 16:57:19 · 13262 阅读 · 5 评论 -
react--模板字符串的应用
1.变量名作为属性值:使用中括号var selected_item = { [type[0]]:true, [type[1]]:false, };2.属性值嵌套模板字符串 var selected_item = { [`type[${key}]`]:true [type[1]]:false, };打印结果:3.模板字符串嵌套三元运算符 let rge = `历年${props.range[0]}月${props.range[0] !== props原创 2021-05-14 14:50:30 · 1589 阅读 · 0 评论 -
react项目中防抖应用
使用场景:使用antd design的slider滑动输入条时,需要在滑动停止时发起请求,挪动过程中不请求,这里使用防抖进行处理let itemout=null changeSlider(e){ if (timeout) clearTimeout(timeout) timeout = setTimeout(() => { //在这里调用请求的方法 }, 300) }也可以使用单独写出来的防抖方法export function debounc原创 2021-05-12 13:36:48 · 683 阅读 · 0 评论 -
react hooks常用方法
1.useStatefunction Example01(){ const [ count, setCount ] = useState(0) //声明 return( <div> <p>{count}</p> //读取 <button onClick={()=>setCount(count+1)}>计数</button> // 使用(修改)原创 2021-04-01 09:39:30 · 1089 阅读 · 0 评论 -
React 三大仓库(Dva 、mobx 、Redux)
Dva:数据状态管理库mobx:响应式管理Redux:函数式管理1.Dva详解1.使用dva脚手架(dva-cli)快速构建React项目npm install -g dva-cli2.定义model先设计 model设计 component连接两者(model 和 component)2.1dva 通过 model 的概念把一个领域的模型管理起来,包含同步更新 state 的 reducers,处理异步逻辑的effects,订阅数据源的 subscriptions 。.原创 2021-02-20 18:05:14 · 2030 阅读 · 0 评论 -
React useRef useEffect
useRef是一个方法,且useRef返回一个可变的ref对象最传统的用法:首先通过useRef创建一个对象叫h3Dom,并且赋值给button的ref上,这样在获取节点打印处,我们可以打印出对应的DOMimport {useState,useRef} from "react";export const ShowDiv =()=>{ const [ color,serColor] = useState('red') const h3Dom =useRef() .原创 2021-01-05 18:35:51 · 579 阅读 · 0 评论 -
JavaScript(ES7): Decorator(修饰器)应用React
为了解决这两个花括号export default WithHoc('登录')(Login)单纯为了让开发变得简洁,并不会从本质上改变我们的代码1.弹出并且安装babel配置npm run eject遇上报错,就本地提交2.下载配置babelnpm install --save-dev @babel/plugin-proposal-decorators3.运行项目npm start运行成功之后会报错4.解决报错1.因为app.js是函数组件,用到了jsx重新配置:方法一原创 2020-11-17 16:10:35 · 212 阅读 · 1 评论 -
React给高阶函数起名字
1.在高阶函数里面写一个方法如果有displayname,就返回displayname如果没有就用本身的name2…定义一个静态属性静态属性是在类上面这个$后面就是在找名字然后拼接3.效果:原创 2020-11-17 15:15:18 · 257 阅读 · 0 评论 -
用React 高阶组件编写登录
高阶组件:高阶组件是参数为组件,返回值为新组件的函数。组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件const EnhancedComponent = higherOrderComponent(WrappedComponent);所有的onchange应该被抽取出来,然后共享抽取login和register1.建立一个逻辑组件 with-hoc.js. 高阶组件是一个函数,需要接受一个参数,返回一个新组件render把html渲染到html上面import Re原创 2020-11-17 15:12:25 · 433 阅读 · 0 评论 -
react实现列表向上自动滚动(一:class写法)
1.给列表最外层添加一个区分标志,比如classname或者id.这里设置一个className=‘zyl-tBody’2.给页面增加监听,保证一进来就可以执行这个向上滚动在生命周期componentDidMount中调用滚动的方法componentDidMount() { clearInterval(timer) //因为后续第6步会使用timer,我们需要定时清理 this.addScroll() }3.在addScroll这个方法里:1.首先是获取到我们原创 2021-04-09 16:13:13 · 1763 阅读 · 0 评论