老实敲代码，佛只渡有缘人

react中监听键盘事件

MD格式字符串中的超链接改为打开新页面跳转

文件在线预览

直接写代码引入就能用，处理数据合并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.

需求：需要将后端返回的文件地址读出来，然后在页面上预览1.分析开始需求的时候我使用的是iframe标签去实现的，如下代码，因为返回来的是一个文件对象，需要使用Blob实例化，上面是官网的blob资料，这里v是一个Blob数据，然后使用createObjectUrl将blob转为服务器上的url地址，然后展示即可const res: any = await fetch(`${selected_content?.doc_type}`); res.blob().then(

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&...

最近踩了一个坑：前端路由可正常跳转，但是刷新之后就会报错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} />进

rreaceact1.react项目中直接引入图片报错问题我想可能是不能直接引用图片进来，应该需要设置才行，从报错来看的话就是ts检查的问题查询了一些资料得出结论，有ts项目的项目中，不能直接引用图片资源的，因此我们需要去主动声明这类资源(.d.ts文件)，原因就是这样；2.解决方法https://www.cnblogs.com/chen-cong/p/10445635.htmlhttps://segmentfault.com/a/1190000038874526不做无用功了，两

1.有个css需求：每一个卡片需要占一行，但是他的宽度又需要随着卡片里面的内容变化，你会怎么解；答：我设置了一个display: inline-block，将div从k

场景：上传文件后，再次选中相同文件上传，onChange事件不会再次触发分析：在第一次上传后，如果不清除input框的value值，那么它就是一直存在的，只要在上传未完成后，手动将val

react源码学习及实现参考文章：https://blog.youkuaiyun.com/weixin_44135121/article/details/109360907；项目demo + 解析文档地址：https://github.com/xa-fz/miniReact

1.React的渲染机制 要掌握react的Diff算法我们必须先了解一下其渲染的机制：在每一次的状态或者属性更新的时候，react组件的render方法会进行渲染，返回一个虚拟DOM对象，这个就是react的渲染机制。2. React的Diff算法 但是这里就有个问题，每次生成新的DOM结构，也还是要转化为真实的DOM，还是会带来大量的真实DOM的操作，会影响程序的执行效率。这时就涉及了react的比较状态变化前后的两个树的Diff算法：在状态变化后通过比较两次虚拟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根本无法指

Context提供了组件之间数据共享的解决方案，相比之下，若组件嵌套过深，或者在多个组件使用，props传递则显得较为不便，我们熟悉的react-redux它的原理其实也是使用了context原理，使用provider将数据分发到包裹的组件中，实现数据的共享，下面我们就结合官网中的例子开始context的学习。1.基础用法首先举了一个两层嵌套，在三个组件中数据传递的例子，就是将属性使用props.属性从第一个组件传递到第二个，再传递到第三个组件，如下图所示：如果使...

1. React16的周期函数React16新的生命周期弃用了 componentWillMount、componentWillReceivePorps，componentWillUpdate新增了 getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数。getDerivedStateFromProps：组件每次被 reren...

本文是参考自-《React进阶之路》简介Ref是react提供的是一种特殊属性，可以获取任意DOM元素甚至可以获取组件的实例，灵活使用ref可以给我们带来便利，例如控制元素的焦点或者文本的选择等，ref会设置一个回调函数，这个回调函数会在组件挂载的时候接收DOM元素或者实例作为参数，这样我们就可以去操作它们了，下面我们具体介绍它的使用场景。使用场景在DOM元素上使用ref这个场景是最...

前言：从安装脚手架到引入redux管理数据直接开始1.使用npm安装脚手架工具1）打开命令行，全局安装create-react-app脚手架工具npm install create-react-app -g2)选择好项目需要安装的位置进行安装，这里安装在d盘，这个过程事件稍微长一些，因为有很多依赖包需要去安装执行create-react-app mydemo，这里已经安...

直接开整，你需要官方下载的一个react脚手架项目即可。1.切换到项目下，npm install less less-loader安装less组件依赖；2.react脚手架并不像vue一样文件是全部暴露的，你需要执行npm run eject，暴露出config文件；3.找到webpack.config.js中line41，修改为：/\.(css|less)$/；支持css和less后...