![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 59
嘻喽喽喽
这个作者很懒,什么都没留下…
展开
-
html2canvas+jsPDF将页面DOM输出为PDF
客户端 Safari 和 iPhone Safari 支持得最好,其次是 Opera 和 Windows 下的 Firefox 3 等。的,因此可能不会 100% 精确到真实的表示,因为它不会生成实际的屏幕截图,而是基于。服务器端可以完美运行。原创 2022-09-30 14:20:47 · 642 阅读 · 1 评论 -
react-copy-to-clipboard 复制内容到剪贴板的库
有时在项目中需要将一些口令复制到用户的剪贴板,这时候就可以使用这个react库:react-copy-to-clipboard导出标签:CopyToClipboardAPI: 要复制到剪贴板的文本 可选回调,将在复制文本时调用;onCopy(text,result) :如果复制成功则返回,否则返回。 可选的复制到剪贴板选项。 实例:...原创 2022-07-05 14:18:50 · 1916 阅读 · 0 评论 -
react-router 的withrouter高阶组件
在react-router中,只有通过Router渲染出来的组件中才会有history、location、match 三个对象,但是会存在需求让我们在非路由组件中进行路由跳转,withRouter的作用就是:把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上当然啦,withRouter(v6版本弃用了),换成了直接用useNavigate (强行hooks起来!!!!)类组件是成版本弃子了吗……...原创 2022-03-28 21:00:47 · 1081 阅读 · 1 评论 -
antd表单按钮验证置灰
1.初始置灰componentDidMount() { // To disabled submit button at the beginning. this.props.form.validateFields(); }2.置灰不显示报错判断是否有错和输入框是否有空 hasErrors = (fieldsError) => { return Object.keys(fieldsError).some(field => fieldsError原创 2022-03-15 14:09:22 · 1917 阅读 · 0 评论 -
ES6中async和await
async/await和Promise的关系async和await是我们进行Promise时的一个语法糖,async/await为了让我们书写代码时更加流畅,增强了代码的可读性。简单来说:async-await 是建立在 promise机制之上的,并不能取代其地位。async 写在函数前,声明该函数为 async函数; await 后面跟表达式,但一般只使用在 Promise对象; async 和 await 一般是联合使用 async 和 await 两种语法结合可以让异步代码像同步代码一样原创 2022-03-06 13:46:12 · 448 阅读 · 0 评论 -
classnames:react官方推荐的动态引入类名的库
我们在react开发写scss时,可能会遇到要为一个标签动态添加多个类,但是在这个时候,原生的react会报错:<div className={styles.class1 styles.class2}</div> //报错这时候可以引用官方推荐的动态引入类的库:classnames。npm install classnames --save || yarn add classnames<Button className={classnames({ ...原创 2022-01-08 21:42:43 · 978 阅读 · 0 评论 -
axios的常见封装(基于react,嘿嘿有点浅显……但会慢慢迭代)
在看GitHub项目的时候,我项目clone完安装完依赖跑起来,第一步我会去看看这个项目的请求request、route配置、权限管理等。这个文章讲的是看的几个项目的request的封装方式。一、引入请求库,配置基础请求首先就是引入相应的库:import Axios, { AxiosInstance, AxiosTransformer } from 'axios'; import qs from 'qs'; //请求数据格式化的库import { createBrowserHistor原创 2022-02-26 22:26:34 · 606 阅读 · 0 评论 -
useContext和useReducer及二者的结合使用
当你的react项目不大,但是需要组件之间传值的时候,父子之间的组件传值倒是可以简单解决,可是如果要是兄弟之间的组件传值呢?redux又没必要,这个时候就可以使用usecontext这个hook来解决。并且可以用useReducer管理包含多个子值的 state 对象。(模拟一个小型redux场景,而无法替代redux)一、useContext和useReducer1、useContext:useContext可以帮助我们跨越组件层级直接传递变量,实现数据共享。就是对它所包含的组件树提供全局共享原创 2022-02-19 20:24:23 · 1877 阅读 · 2 评论 -
防抖和节流及其简单实现(react为例)
防抖和节流可以节省资源,减小服务器端压力,提升用户体验。在日常开发中,我们经常会有这样的需求:监听用户的输入(keyup、keydown)、浏览器窗口调整大小和滚动行为(resize)、鼠标的移动行为(mousemove)等。如果这些事件一触发我们就执行相应的事件处理函数的话,那将会造成较大的资源浪费或者给用户带来不好的体验。这时防抖和节流就派上用场了!!一、防抖:防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。思路:每次触发事件时都取消之前的延时调原创 2022-02-07 21:58:20 · 1883 阅读 · 0 评论 -
react render 的原理和触发时机
理解react的render函数,要从这三点来认识。原理、执行时机、总结。一、原理在类组件和函数组件中,render函数的形式是不同的。在类组件中render函数指的就是render方法;而在函数组件中,指的就是整个函数组件。 classFooextendsReact.Component{ render(){ //类组件中 return<h1>Foo</h1>; } ...原创 2022-01-16 20:23:08 · 5109 阅读 · 0 评论