react
MYG_G
这个作者很懒,什么都没留下…
展开
-
Error: error:0308010C:digital envelope routines::unsupported的解决方案
Error: error:0308010C:digital envelope routines::unsupported的解决方案,node版本是18以上影响,配置package.json文件原创 2024-01-13 23:17:04 · 996 阅读 · 0 评论 -
react umi中使用svg线上图片不加载问题
react中使用svg的几种方法,解决svg加载失败问题原创 2023-06-28 16:16:41 · 1667 阅读 · 0 评论 -
react hook 初次渲染时不执行useEffect
react hooks自定义一个钩子,在第一次调用时跳过运行useEffect函数。转载 2023-03-09 11:25:48 · 2796 阅读 · 0 评论 -
React hooks 怎样做防抖?
参考文章:https://blog.csdn.net/wangweiscsdn/article/details/107844516https://blog.csdn.net/weixin_47958188/article/details/1072315981. lodash防抖需要下载loadsh依赖:# yarn add lodashnpm i lodash引入:// lodash 支持按需加载,有利于打包结果优化import debounce from 'lodash/debounc原创 2022-01-17 17:35:23 · 901 阅读 · 0 评论 -
React锚点滚动的问题
参考文献:https://segmentfault.com/a/1190000023881414React锚点滚动,传统的a标签写法如下<a href = '#div'>To div</a><div id= 'div'>DIV</div>这种写法点击a标签就会跳转,并且伴随路由的改变。我们可以使用scrollIntoView方法来实现滚动效果scrollIntoView方法可配置参数它接受两种形式的值:布尔值或对象。接受布尔值主要还是为了兼容不原创 2021-12-30 15:35:11 · 1302 阅读 · 12 评论 -
G2Plot自定义tooltip的title
需求:期望移入显示的tooltip可以自定义title和g2-tooltip-list-item官网链接:https://g2plot.antv.vision/zh/examples/bar/basic#width-ratio效果如下默认显示如下:tooltip默认展示的title是我们Y轴对应数据,默认展示的g2-tooltip-list-item是x轴数据类型名称:x轴对应的数据用到tooltip相关属性代码如下import React, { useEffect } fro.原创 2021-12-21 17:43:14 · 2559 阅读 · 7 评论 -
bizcharts饼图Legend显示数值和百分比
效果图百分比官网API:https://www.bizcharts.net/product/BizCharts4/category/62/page/81#itemvalueitemValue是Legend设置配置图例value的属性,我们可以再formatter函数中设置我们想要显示的值。打印formatter中(text: string, item: ListItem, index: number)对应的值,我们可以用index获取当前对应的value值const tarValue = cha原创 2021-12-16 11:25:33 · 2528 阅读 · 0 评论 -
React hooks的渲染逻辑与class组件的setState的区别
参考文献:https://blog.csdn.net/qiwoo_weekly/article/details/106233082转载 2021-12-01 15:28:27 · 359 阅读 · 0 评论 -
Form.List实现多层嵌套动态添加表格antd+hooks+ts
功能如下1.默认无数据,点击绿色新增按钮,会动态添加条件组2.新增的动态条件组中都有新增子组件的按钮,可以在组中,在动态添加子组件数据结构如下: "inGroups": [ { "conGroup": [ { "xxx": null, "yyy": 1, "zzz": 1, },原创 2021-11-26 16:56:00 · 3236 阅读 · 4 评论 -
查看聊天记录(react+ts+hooks)
import React, { useEffect, useState } from 'react';import { Drawer, } from 'antd';import avatar from '@/assets/images/avatar.png';import styles from './index.less';type IRecordDrawerProps = { visible: boolean; onCancel: () => void; talkItem.原创 2021-09-26 17:15:48 · 346 阅读 · 0 评论 -
在线录音+上传录音(react+hooks+ts)
单个上传录音单个在线录音多个在线录音多个上传录音原创 2021-09-26 16:15:55 · 3754 阅读 · 0 评论 -
语音合成设置(react+hooks+ts)
代码实现import React, { useEffect, useState } from 'react';import { Modal, Form, Select, Slider, Row, Col, Button } from 'antd';import styles from '../index.less';type ISyntheticConfigProps = { valueRange: any; valueConfig: any; loading: boolean; .原创 2021-09-23 11:28:17 · 532 阅读 · 0 评论 -
设置scrollTop无效(react)
参考文献:1.https://zhuanlan.zhihu.com/p/3424927022.https://www.jianshu.com/p/4c9e59b846743.https://blog.csdn.net/weixin_39948247/article/details/111338810?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&原创 2021-09-22 10:50:53 · 2122 阅读 · 3 评论 -
antd table分页居中显示(react)
在最新版的antd中,.ant-table-pagination ** 是flex,.ant-table-pagination-right**设置的 justify-content: flex-end,所以分页默认在右边展示,如下:我们想要分页居中,首先要把flex给成display: block;然后在给 .ant-table-pagination-right设置居中 text-align: center;上代码:.center_table{ :global { .ant-tabl原创 2021-09-17 10:24:39 · 2126 阅读 · 0 评论 -
自定义audio(react)
H5的audio默认的样式可以满足我们录音播放停止等功能,提供的部分固定样式可以修改,如下:audio::-webkit-media-controls-panelaudio::-webkit-media-controls-mute-buttonaudio::-webkit-media-controls-play-buttonaudio::-webkit-media-controls-timeline-containeraudio::-webkit-media-controls-current-t原创 2021-09-16 15:28:09 · 1979 阅读 · 0 评论 -
React 中 className 包含多个样式
参考链接:https://www.jianshu.com/p/0ebc54255259在 React 中,使用 className 引入样式的时候,可能会引入多个样式。类似于原生的<div class="style_a style_b style_c"></div>react 中的 className 引入多个样式方式一className 利用 ${ }如下面的方式引用了 mystyle.bigBtn 和 mystyle.largeSpace 样式<Butto转载 2021-08-19 09:40:40 · 2062 阅读 · 0 评论 -
JS实现复制文本内容到剪切板
上代码:1.已知要粘贴的文本内容,就可以直接把内容作为参数传递。2.不知道文本内容,需要从元素获取,可以用一下代码var test=document.getElementById(“id名”).innerText;//test是文本内容。 copyText = (test) =>{ //不知道文本内容,需要从元素获取,可以用一下代码 //var test=document.getElementById("id名").innerText; var oInput = do原创 2021-05-07 16:26:15 · 466 阅读 · 0 评论 -
React 介绍使用ES6和使用create-react-class的方式
原文链接:https://blog.csdn.net/younghaiqing/article/details/79562980通常情况下你可以用普通的 JavaScript 类定义一个组件:##### 如果你不使用 ES6 ,你可以使用 create-react-class 方法代替:除了一些例外,ES6 classes(类) API 非常类似于函数 createReactClass() 。...转载 2021-04-08 15:30:00 · 617 阅读 · 0 评论 -
react项目部分页面--代码保存不刷新
react部分页面代码保存不刷新博主要被这个问题搞疯掉了,这个问题真的是太恶心了。react是自带热更新的,主要页面可以看到,你修改代码保存,页面不刷新,不报错,手动刷新页面也没用,但是只有重启项目你的代码才会刷新。是不是巨坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑。1.首先看一下你的route.js的组件路径对不对{ name: '登录', path: '/u原创 2020-11-25 14:00:28 · 2744 阅读 · 2 评论 -
接口统一加时间戳(接口避免缓存)
接口统一加时间戳(接口避免缓存)如何获取时间戳let time = new Date().getTime();1.axios如果你们请求接口用的是axios的话,可以用路由拦截器来统一加,在config.url后面统一加时间戳就可以了借鉴于:https://www.kancloud.cn/yunye/axios/234845!!!强烈推荐看一下,很清晰!!!我们在请求数据的时候,会出现几种情况,判断权限或者loading的显隐。这些在每一个请求都会做的事情,我们可以封装一个service的请求原创 2020-09-07 17:25:02 · 6448 阅读 · 0 评论 -
React在什么情况下会render
React在什么情况下会render参考链接:https://blog.csdn.net/u012131835/article/details/850914371、初始化react生命周期1.componentWillMount 在渲染前调用,在客户端也在服务端。2.componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用s转载 2020-09-07 17:19:11 · 609 阅读 · 0 评论 -
点击掉接口获取数据,避免多次调用(react)
点击掉接口获取数据,避免多次调用(react)addEvent = () => { document.addEventListener('click', this.handleAdd)}removeEvent = () => { document.removeEventListener('click', this.handleAdd)}handleContent = (e) => { e.nativeEvent.stopImmediatePropagation()}原创 2020-09-07 17:04:43 · 1306 阅读 · 2 评论 -
this.forceUpdata()---react
this.forceUpdata()—reactreact里面强制刷新组件的默认方法,this指的是当前组件,所以这里用到 计时器,计时器的this是指向window的,这里用bind来改变this指向if (expensesProjectList === null) { console.log(expensesProjectList, 55555555) let timer = setTimeout((function () { clearTimeout(timer) let原创 2020-09-07 17:03:27 · 803 阅读 · 0 评论 -
babel-polyfill报错
babel-polyfill报错报错原因:babel-polyfill报错,是因为他只能在页面调用一次,如果调用多次就会冲突。一个很好的例子,我之前写代码的时候,加引导页,我想点击按钮的时候加载页面的JS,后来,我想点击整个屏幕也可以加载,当这两个同时存在的时候,点击按钮的时候注入了JS,按钮也在页面的Div里,所以这个时候会触发两次,页面就会报错,为了避免这个问题,你要在加载页面的时候进行判断,无论哪种情况只能触发一次将JS注入页面。<div id="root"><span id=原创 2020-09-07 17:01:29 · 1436 阅读 · 0 评论 -
mobile+PC白屏问题解决(react15.6)
mobile+PC白屏问题解决(react15.6)出现白屏的原因:因为后端加了缓存,用户使用的时候会有缓存,当线上更新新的版本以后,当打开页面以后会读取本地缓存,因为之前的js文件已经被替换,所以找不到文件,页面就出现了白屏。给version文件加了时间戳,每次进index.html的时候,会指向下面的script标签里面的代码,因为时间戳不一样,所以每次都会调用一下version。需要每次在发新版本的时候,手动替换一下version里面的js的src路径。就可以解决白屏1.index.html在i原创 2020-09-07 16:57:32 · 319 阅读 · 0 评论 -
JS IPV4和IPV6混合正则校验
IPV4和IPV6混合正则校验const ipReg = /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4原创 2020-08-13 11:31:32 · 2253 阅读 · 0 评论