react
hzxOnlineOk
这个作者很懒,什么都没留下…
展开
-
【ReadableStream】fetch body数据ReadableStream转换json
前端工程中发送 HTTP 请求从来都不是一件容易的事,前有骇人的 ActiveXObject ,后有 API 设计十分别扭的 XMLHttpRequest ,甚至这些原生 API 的用法至今仍是很多大公司前端校招的考点之一。也正是如此,fetch 的出现在前端圈子里一石激起了千层浪,大家欢呼雀跃弹冠相庆恨不得马上把项目中的 $.ajax 全部干掉。然而,在新鲜感过后, fetch 真的有你想象的那么美好吗?转载 2022-09-06 15:36:22 · 2355 阅读 · 0 评论 -
antd table合并行的columns配置动态修改列名导致的引用问题
因为antd的Table组件的columns是在初始化配置的时候一次性绑定的一个引用配置,因此,后续必须使用同一个引用配置columns才能使合并行效果生效,而我使用了序列化字符串再转回js对象,这个过程产生了新的引用,导致合并行的一些效果对应不上原先的配置,因此合并行效果失效。接着,setColumns成功,组件重新渲染,发现合并行失效了,文本替换也没有实时更新,变成和我的判断逻辑(汇总统计=总存储量,其他统计子类=存储量)相反了。......原创 2022-08-11 15:39:26 · 1748 阅读 · 0 评论 -
react 使用connect的组件ref子组件方法无法调用解决方法
react 使用connect的组件ref子组件方法无法调用解决方法原创 2022-07-06 18:48:42 · 1172 阅读 · 0 评论 -
React组件 数组有值setState后发现数据没有更新【排查】
博主遇到了个问题React组件的PureComponent中,antd的Select组件调用onSelect方法:this.setState({ selected: [1,2,3] });但是打印发现没有更新成功原因是因为生命周期willrecivie又赋值了一次,导致值被覆盖了!!!...原创 2022-05-13 16:32:45 · 990 阅读 · 2 评论 -
Can‘t perform a React state update on an unmounted component
react hook function componentuseEffect(() => { let isMounted = true; // note mutable flag someAsyncOperation().then(data => { if (isMounted) setState(data); // add conditional check }) return () => { isMounted = false原创 2022-04-25 10:46:32 · 908 阅读 · 0 评论 -
umi antd-pro项目react hook构建下的redux的全局cookie获取不到最新值
umi antd-pro项目react hook构建下的redux的全局cookie获取不到最新值当我把获取cookie的变量定义在某个接口的action里时,才能够获取到最新值。这是因为redux并非即时更新的,如果我们的cookie值依赖于另外一个接口,那么我们就不能在model文件的全局作用域里去获取这个cookie值。...原创 2022-04-06 17:47:55 · 1456 阅读 · 0 评论 -
antd pro react项目 umi dev 修改默认端口号mac和windows
windows"start": "set PORT=8081 && umi dev"mac版需要安装cross-envnpm install cross-env --save-dev"start": "cross-env PORT=8081 umi dev"原创 2022-03-29 09:22:00 · 1931 阅读 · 0 评论 -
react中同时setState同一个对象的两个不同参数 只有最后一个生效的原因以及解决办法
问题:我定义了2个表单对应的事件去处理日期数据以及其他类型的数据,我在表单某个Input输入时,调用onBlur在输入框失去焦点时自动根据输入框的值(身份证号码)填充出生日期以及性别但是我发现react中同时setState同一个对象的两个不同参数 只有最后一个生效,why?原因:React会将多个this.setState产生的修改放在一个队列里,缓一缓,攒在一起,觉得差不多了再引发一次更新过程。react为了提高整体的渲染性能,会将一次渲染周期中的state进行合并,在这个渲染周期中原创 2021-07-19 20:32:24 · 1552 阅读 · 2 评论 -
在react中监听页面的滚动scrollTop,scrollLeft
// pc滚动事件触发 const PC_Scroll = () => { window.addEventListener('scroll', bindHandleScroll); }; const bindHandleScroll = (event) => { // 滚动的高度 const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : .原创 2021-05-26 15:40:51 · 1504 阅读 · 0 评论 -
React应用里Invalid hook call错误消息的处理
今天我做React(umi.js 中使用useAccess)开发时,遇到如下的错误消息:import {useAccess } from 'umi';Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:You might have mismatchin.原创 2021-04-09 16:02:17 · 1246 阅读 · 2 评论 -
使用Ant Design React的Collapse折叠面板组件时,如何阻止点击子元素却同时也触发了折叠面板父组件的展开收起方法
监听子控件的click事件,并调用e.stopPropagation()阻止click事件继续传递,可以成功让外层的折叠面板父控件就接收不到click事件const renderHeader = (header: string, icon: React.ReactNode, canEdit: boolean, item?: any) => ( <div> {icon} <span style={{ marginLeft: 8, marginRig原创 2021-03-02 18:25:41 · 3076 阅读 · 0 评论 -
React native如何让点击事件穿透遮罩层(水印)- pointerEvents属性应用
假如你有这么一个需求,你需要为一个页面生成水印,水印需要浮在最上层,那如何保证水印不会遮盖底层的内容呢?也就是我们要讲的 “事件穿透”在PC网页中,直接生成的是浏览器的dom元素进行排列绘制因此可以利用css自带的属性: pointer-events: none;遮罩层容器添加一条css属性 pointer-events: none, 遮罩下的就可以点击了,IE11+支持而React-Native则比较特殊,他毕竟不是运行在浏览器上的,他只是实现了Android和Ios底层V..原创 2020-12-31 11:32:12 · 1820 阅读 · 0 评论 -
Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
在react中label标签不能使用for关键字报错警告:Warning: Invalid DOM property for. Did you mean htmlFor?错误写法:<div className="radioItem"> <input type="radio" id="curEntrust" /> <label for="curEntrust">当前委托</label></div>.转载 2020-12-31 11:04:12 · 2184 阅读 · 0 评论 -
React Diff 算法原理解析
React在界面刷新(setState)时,并不会马上对所有的DOM节点进行操作,而是先通过diff算法计算后,再对有变化的DOM节点进行操作(native是对原生UI层进行操作),刷新步骤如下:1. state 变化,生成新的 Virtual Dom2. 比较 Virtual Dom 与之前 Virtual Dom 的异同3. 生成差异对象4. 遍历差异对象并更新真实 DOM一、Virtual Dom 概述对 DOM 的操作很耗时,使用 JS 对象来模拟 DOM Tree,在渲.转载 2020-11-16 16:27:51 · 559 阅读 · 0 评论 -
React setState 引发的思考
转载自:https://segmentfault.com/a/1190000015463599?utm_source=tag-newest仅供学习写业务代码的时候 需要经常用到setState, 前几天review代码的时候, 又想了一下这个API, 发现对它的了解不是很清楚, 仅仅是setState是异步的, 周六在家参考了一些资料,简单整理了下,写的比较简单, 通篇阅读大概耗时 5min, 在这简单分享一下, 希望对大家有所帮助 ;)。先看一个例子假如有这样一个点击执行累加场景:..转载 2020-11-15 16:13:15 · 204 阅读 · 0 评论 -
记录 生成二维码canvas 并且截取指定html元素转换为截图
错误案例 (元素没有弄成固定fixed定位,当屏幕过小时,超过1屏有滚动,可能导致只能截图到部分。并且注意指定的html容器元素在被转换时,是否已经挂载完毕) componentDidMount() { html2canvas(document.getElementById("#capture"), { useCORS: true, width: window.screen.availWidth, height: 532, windowWidt原创 2020-09-15 17:34:24 · 219 阅读 · 0 评论 -
react 中的行高不生效且撑的高度变的很大的原因
在JSX中,有一些样式属性是不支持转为px的,比如lineHeight<div style={{ width: 100, lineHeight: 22 }} />这无法被正确解析为行高值应该这么写<div style={{ width: 100, lineHeight: '22px' }} />原创 2020-09-10 16:17:30 · 608 阅读 · 7 评论 -
React 中 setState(prevState=>{ ... })
常规方式连续执行2次setState,如下方式,往往只有一次效果,即后者的效果 this.setState({ count: this.state.count + 1, }) this.setState({ count: this.state.count + 2, })相当于this.setState(Object.assign({},{ count: this.state.count + 1, },{ count: this.s原创 2020-09-07 20:51:00 · 575 阅读 · 0 评论 -
react APP内置移动端h5 canvas画布二维码转成base64链接
有这么一个需求,保存图片到手机相册,真正的保存是调用的原生的接口,这个不是我想讲的重点我想说的是,如何使用qrcode.react 生成二维码之后再将以canvas画布形式渲染的二维码转成base64链接!参考自https://blog.csdn.net/qq_42190134/article/details/92218323这位博主/* global APPID */import React from 'react'import { connect } from 'dva'imp.原创 2020-08-28 19:14:15 · 2354 阅读 · 5 评论 -
React 前端生成二维码插件 qrcode.react
import QRCode from 'qrcode.react'<QRCode size={191} value={`http://facebook.github.io/react/`}/>原创 2020-08-26 10:30:41 · 635 阅读 · 0 评论 -
umijs中引入jquery
移动端H5中,仍旧可以使用jquery的scroll监听滚动,这个监听没有明显的延迟yarn add jquery --saveimport $ from 'jquery';componentDidMount() { $('.am-flexbox-item').scroll(function () { //已经滚动到上面的页面高度 var scrollTop = $('.am-flexbox-item').scrollTop(); //...原创 2020-08-04 16:20:31 · 1816 阅读 · 0 评论 -
this.state直接更改状态,再setState导致无法更新
如下代码所示:_imageOnLoad = (flag) => { console.log('_imageOnLoad flag', flag) this.state.hasImgLoaded = flag; this.setState({ hasImgLoaded: this.state.hasImgLoaded }); }不能这样赋值,需要另外定义一个变量,赋值flag给新变量,再通过this.setState设置更新值,或者直接赋值flag(这边主要是做个.原创 2020-08-03 17:35:10 · 592 阅读 · 0 评论 -
关于React的setState的坑
this.setState如果需要修改this.state中的数据必须调用this.setstate这个方法这个方法里面有2个参数参数1:类型 对象key是this.state中的key值val是修改后的数据参数2:类型 函数 1、查看数据是否已经更新 2、可以获取到数据更新后的最新的DOM结构书写方案1:this.setstate({},()=>{})书写方案2:this.setstate(()=({}),()=>{})关于 setStat...转载 2020-07-31 09:28:08 · 757 阅读 · 0 评论 -
justify-content: space-between;未生效?没有两端对齐
两种可能(1)忘记设置display: 'flex'display: 'flex';(2)父元素有伪元素,伪元素会阻碍flex属性的生效原创 2020-07-27 20:15:38 · 2324 阅读 · 2 评论 -
初学React-hooks 整理
Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。React 16.8.0 是第一个支持 Hook 的版本。升级时,请注意更新所有的 package,包括 React DOM。 React Native 从0.59 版本开始支持 Hook。没有破坏性改动在我们继续之前,请记住 Hook 是:完全可选的。你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想,你不必现在就去学习或使用...转载 2020-07-26 12:39:49 · 239 阅读 · 0 评论 -
前端es6 require动态引入图片报错Error: Cannot find module
在React-native中,Image组件的source如果使用require方式引入图片资源,则必须使用静态的字符串,不能使用变量,因为require是编译时执行的,而非运行时执行!于是React-native为Image组件的source提供了另外一种使用变量的方式source={{ uri: item.picture }}关于es6的require添加动态变化的路径直接静态......原创 2019-07-17 14:50:57 · 24911 阅读 · 12 评论 -
react react-native yarn start 清除缓存
解决方法:方法一、yarn start --reset-cache方法二、第一步:npm指令清除npm缓存npm cache clean --force第二步:删除node_module包原创 2020-06-18 18:35:57 · 2533 阅读 · 0 评论 -
react 行内样式的!important不生效怎么处理
React本身不支持在行内style里直接写成fontSize: `${fontSize}px !important`,具体原因不清楚解决办法如下代码所示,使用ref的方式去处理该h1虚拟元素的样式: <h1 className="contentTitle" style={{ textAlign: titleCenter ? 'center' : 'left', .原创 2020-06-13 10:08:02 · 4143 阅读 · 0 评论 -
react或者css实现多行文本超出加省略号(多行省略)
width: 200px; // 必须指定宽度overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;正常的写法是这样, 但是对于react不适用, React的jsx写法应该是这样子的:width: 20...原创 2019-03-16 20:00:17 · 2743 阅读 · 2 评论 -
react笔试题
1、rn碰到了哪些坑2、setState有几个参数3、js事件轮询4、setTimeout和Promise同时执行,哪个的回调先执行5、android和ios的图片圆角兼容问题6、RN与JS通信的原生接口叫什么,怎么用7、说说组件之间的通信(父子组件、兄弟组件)8、RN AsyncStorage[007].tostringnull+undefined[A=3]=[][B=1]=[null]typeof nullnull instanceof object...原创 2020-06-05 15:19:56 · 637 阅读 · 0 评论 -
前端 如何提交form表单格式的请求体
以Dva.js为例子(models.js):下面代码中,有2个接口方法,1、addCollect添加收藏 2、cancelCollect取消收藏提交表单格式的数据,需要new FormData 申请一个表单格式的实例,再通过实例去追加表单字段数据addCollect: (params) => { params.isForm = true const collect = new FormData() collect.append('soleId', `${param原创 2020-05-26 08:58:22 · 2281 阅读 · 0 评论 -
react 移动端h5 监听滚动document.documentElement.scrollTop取值总取上一次滚动触发结束的值
react 移动端h5 监听滚动document.documentElement.scrollTop取值总取上一次滚动触发结束的值,也就是上一次滚动到700,这一次滚动到900,那么在touchmove事件回调中打印出的是700一个不够精确的解决办法是,为处理逻辑增加一个定时器延时获取,给一定的延时,可以获得接近正确的数据,同时又能及时的触发逻辑去渲染UIcomponentDidMount() { document.documentElement.addEventListener(..原创 2020-05-25 13:24:01 · 1106 阅读 · 0 评论 -
react 开发移动端h5项目 图片打包不显示 可以这样处理(转换图片为base64)
项目做好了,准备打包构建,发现本地引用的图片资源,在打包后未能生成,导致部署后,图片未能显示出来方法就是,将图片转换成base64编码我们只需要到http://tool.chinaz.com/tools/imgtobase这个站点,上传我们需要转换成base64的图片,将图片转成base64,替换img标签的src属性值为base64即可,这样子打包就能将正确的图片引用打包进去...原创 2020-05-23 23:54:06 · 986 阅读 · 0 评论 -
react 写移动端H5页面 引用本地图片 且路径正确,但是图片无法正确展示(会展示成默认图片)
错误的图片如下:Card.js(这边直接在img标签写的相对路径,但是无法正确显示)import React from 'react'import styles from './card.less'export default class extends React.Component { constructor(props) { super(props) this.state = { // isShow: false, } ..原创 2020-05-23 21:52:14 · 813 阅读 · 0 评论 -
js正则表达式匹配携带有img子标签的父级P标签集合
const reg = /<p\b[^<>]*><img\b[^<>]*\/><\/p>/g // 这边是默认匹配0下标进行html文本替换 // const matchStr = content.match(reg) // const strReg = /<img\b[^<>]*\/...原创 2020-05-06 11:48:10 · 1176 阅读 · 1 评论 -
react 不确定父组件将传递哪些属性名给子组件怎么做?
原创 2020-04-08 10:30:55 · 231 阅读 · 1 评论