![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
reactJs
起来改bug
这个作者很懒,什么都没留下…
展开
-
前端监听键盘事件
react中监听键盘事件原创 2023-03-06 16:09:18 · 1311 阅读 · 0 评论 -
MD格式字符串中的超链接改为打开新页面跳转
MD格式字符串中的超链接改为打开新页面跳转原创 2022-11-23 17:04:11 · 4113 阅读 · 3 评论 -
react文件预览插件react-file-viewer
文件在线预览原创 2022-11-08 11:54:41 · 8360 阅读 · 1 评论 -
antd库Table组件合并单元格(适用于5.X版本以下)
直接写代码引入就能用,处理数据合并table单元格const mergeCell = (val: string, index: number, data: any[]) => { const obj: any = { children: val, props: {}}; const modules = Array.from(new Set(data.map((d: any) => d.module))); const detailI.原创 2022-04-20 11:15:43 · 1557 阅读 · 0 评论 -
React-pdf:pdf预览插件实践
需求:需要将后端返回的文件地址读出来,然后在页面上预览1.分析开始需求的时候我使用的是iframe标签去实现的,如下代码,因为返回来的是一个文件对象,需要使用Blob实例化,上面是官网的blob资料,这里v是一个Blob数据,然后使用createObjectUrl将blob转为服务器上的url地址,然后展示即可const res: any = await fetch(`${selected_content?.doc_type}`); res.blob().then(原创 2022-04-13 11:59:02 · 4956 阅读 · 0 评论 -
antd框架notification组件中使用message含有国际化的参数
notification.warning({ message: 'Notification Title', description: <div>{formatMessage({id: 'cpu_buy'}, {mp: <a href={env?.['portal- mp'].externalUrl} target="_self" rel="noopener noreferrer">MP</a>})}</div&...原创 2022-01-07 17:08:46 · 644 阅读 · 0 评论 -
关于react路由和ngnix代理的路径冲突报错404
最近踩了一个坑:前端路由可正常跳转,但是刷新之后就会报错404 not founda.前端配置的代理如下:location /app { proxy_pass https://api-appbuy-ews.axa.wise-paas.com.cn/v1; }b.写路由的时候也配置了一个app的路径:<Route path='/appInfo/:appName/lang/:lang' component={AppInfo} />进原创 2021-06-24 13:47:20 · 633 阅读 · 0 评论 -
报错:Cannot find module ‘xxx.svg‘ or its corresponding type declarations.ts(2307)
rreaceact1.react项目中直接引入图片报错问题我想可能是不能直接引用图片进来,应该需要设置才行,从报错来看的话就是ts检查的问题查询了一些资料得出结论,有ts项目的项目中,不能直接引用图片资源的,因此我们需要去主动声明这类资源(.d.ts文件),原因就是这样;2.解决方法https://www.cnblogs.com/chen-cong/p/10445635.htmlhttps://segmentfault.com/a/1190000038874526不做无用功了,两原创 2021-06-21 10:08:49 · 6275 阅读 · 0 评论 -
react项目中实现滚动页面后 导航栏固定在页面顶部
1.有个css需求:每一个卡片需要占一行,但是他的宽度又需要随着卡片里面的内容变化,你会怎么解;答:我设置了一个display: inline-block,将div从k原创 2021-06-09 10:05:57 · 2569 阅读 · 1 评论 -
【React小技巧】如何解决上传文件时onChange选择相同文件不会再次触发
场景:上传文件后,再次选中相同文件上传,onChange事件不会再次触发分析:在第一次上传后,如果不清除input框的value值,那么它就是一直存在的,只要在上传未完成后,手动将val原创 2021-06-04 10:17:34 · 1114 阅读 · 0 评论 -
【react原理】demo实现render方法及React.createElement方法+解析
react源码学习及实现参考文章:https://blog.csdn.net/weixin_44135121/article/details/109360907;项目demo + 解析文档地址:https://github.com/xa-fz/miniReact原创 2020-12-24 01:00:30 · 316 阅读 · 0 评论 -
React的Diff算法
1.React的渲染机制 要掌握react的Diff算法我们必须先了解一下其渲染的机制:在每一次的状态或者属性更新的时候,react组件的render方法会进行渲染,返回一个虚拟DOM对象,这个就是react的渲染机制。2. React的Diff算法 但是这里就有个问题,每次生成新的DOM结构,也还是要转化为真实的DOM,还是会带来大量的真实DOM的操作,会影响程序的执行效率。这时就涉及了react的比较状态变化前后的两个树的Diff算法:在状态变化后通过比较两次虚拟DOM...原创 2020-12-13 13:45:29 · 293 阅读 · 0 评论 -
【二】跟着react官网学习__Refs and the DOM
由一个日常开发的demo展开学习:react项目,想在无状态组件中获取input的dom节点,使用ref报错:提示中可以看到无状态组件中应该是不能使用ref获取DOM节点的,但它给出提示React.forwardRef,我们去查询一下它的用法,查询了react官网(链接在这里https://reactjs.bootcss.com/docs/refs-and-the-dom.html)。1.让我们记住官网说明的这两句话1)你只要记住不能在无状态组件上使用ref,因为没有实例,this根本无法指原创 2020-10-29 01:16:56 · 159 阅读 · 0 评论 -
【一】跟着react官网学习__Context
Context提供了组件之间数据共享的解决方案,相比之下,若组件嵌套过深,或者在多个组件使用,props传递则显得较为不便,我们熟悉的react-redux它的原理其实也是使用了context原理,使用provider将数据分发到包裹的组件中,实现数据的共享,下面我们就结合官网中的例子开始context的学习。1.基础用法首先举了一个两层嵌套,在三个组件中数据传递的例子,就是将属性使用props.属性从第一个组件传递到第二个,再传递到第三个组件,如下图所示:如果使...原创 2020-09-08 15:56:20 · 202 阅读 · 0 评论 -
react常见面试问题(持续更新)
1. React16的周期函数React16新的生命周期弃用了 componentWillMount、componentWillReceivePorps,componentWillUpdate新增了 getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数。getDerivedStateFromProps:组件每次被 reren...原创 2019-10-30 23:12:07 · 667 阅读 · 0 评论 -
认识ref及其使用场景
本文是参考自-《React进阶之路》简介Ref是react提供的是一种特殊属性,可以获取任意DOM元素甚至可以获取组件的实例,灵活使用ref可以给我们带来便利,例如控制元素的焦点或者文本的选择等,ref会设置一个回调函数,这个回调函数会在组件挂载的时候接收DOM元素或者实例作为参数,这样我们就可以去操作它们了,下面我们具体介绍它的使用场景。使用场景在DOM元素上使用ref这个场景是最...原创 2019-10-29 23:45:15 · 1078 阅读 · 0 评论 -
在create-react-app官方脚手架中引入redux数据管理工具
前言:从安装脚手架到引入redux管理数据直接开始1.使用npm安装脚手架工具1)打开命令行,全局安装create-react-app脚手架工具npm install create-react-app -g2)选择好项目需要安装的位置进行安装,这里安装在d盘,这个过程事件稍微长一些,因为有很多依赖包需要去安装执行create-react-app mydemo,这里已经安...原创 2019-05-18 00:06:10 · 1729 阅读 · 0 评论 -
在react脚手架中添加less预编译工具
直接开整,你需要官方下载的一个react脚手架项目即可。1.切换到项目下,npm install less less-loader安装less组件依赖;2.react脚手架并不像vue一样文件是全部暴露的,你需要执行npm run eject,暴露出config文件;3.找到webpack.config.js中line41,修改为:/\.(css|less)$/;支持css和less后...原创 2019-05-25 00:17:34 · 351 阅读 · 0 评论