react
蓝枫秋千
前人栽树,后人乘凉。既然我乘了前人的树,那么就栽更多的树给后人~共勉!
展开
-
React中下载文件的两种方式(POST和GET)
使用GET下载方式:通过创建创建一个不可见的a标签,手动触发点击事件,然后下载,再移除标签。 download = url => { const eleLink = document.createElement('a'); eleLink.style.display = 'none'; // eleLink.target = "_blank" eleLink.href = url; // eleLink.href = record; document原创 2021-06-12 17:09:07 · 4747 阅读 · 0 评论 -
React生成二维码
引入qrcode.react库npm install qrcode.react简单使用示例import React from 'react';import QRCode from 'qrcode.react';export default function index() { return ( <div> <h2>二维码</h2> <QRCode value="http://face.原创 2020-12-03 17:52:27 · 811 阅读 · 0 评论 -
react内存泄漏警告
在运行react项目的时候有时会报一个红色的warning,如下图Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmou原创 2020-05-18 16:44:55 · 1780 阅读 · 0 评论 -
react项目启动报错:Cannot find module './locale'
原因: 传项目的时候没有排除 yarn.lock文件,以后用yarn安装的时候老是安装以前的版本解决方案: 删掉yarn.lock文件, 删除node_modules, 再使用 yarn重新安装就好了...原创 2020-05-01 10:28:01 · 3455 阅读 · 0 评论 -
react项目使用需要注意的地方
componentDidmount必须放到所有方法最前面return后面不要加else(如果是if中的结构简单也能省去{})function elsereturn() { // 不提倡用法 if(布尔值) { return 333; } else { return 444; } // 提倡用法 if(布尔值) return 333; return 444;...原创 2020-04-07 19:03:30 · 1057 阅读 · 0 评论 -
react几种路由传参的优缺点
params传参方式优点:刷新地址栏之后参数还存在缺点:只能传递字符串,不大适合传参数多或者长的<Route path='/path/:name' component={Path}/><link to="/path/2">xxx</Link>this.props.history.push({pathname:"/path/" + name});读取参...原创 2020-04-03 14:31:03 · 1276 阅读 · 0 评论 -
使用memo,useMemo和useCallback优化react渲染性能
memo问题: 当在一个父组件中调用一个子组件的时候,由于父组件的state发生了改变导致父组件更新,虽然子组件没有发生改变,但是也会进行更新,如下面代码import React, { useState, memo } from 'react'export default function index(): JSX.Element { const [count, setCount...原创 2020-03-12 14:42:16 · 5394 阅读 · 0 评论 -
理解 React Hooks 的 Capture Value 特性
在此之前推荐两篇文章精读《useEffect 完全指南》说明: 如果你想用好 Function Component 或者 Hooks,这篇文章几乎是必读的,因为没有人能猜到什么是 Capture Value,然而不能理解这个概念,Function Component 也不能用的顺手精读《Function VS Class 组件》说明: 以后在 React 中经常使用 Class 的写法,在...原创 2020-03-03 11:22:24 · 1107 阅读 · 0 评论 -
处理warning:Each child in a list should have a unique “key” prop.
问题: 使用react在循环生成多个组件的时候经常会报一个警告:Each child in a list should have a unique “key” prop原因: 这是由于在进行组件遍历的时候没有加一个key来进行区分每个组件,因为dom需要deff进行对比解决方案:如果是进行循环遍历生成组件的,将key设置为index即可Html = () => {const d...原创 2020-02-26 10:13:57 · 94625 阅读 · 7 评论 -
使用useEffect方法做到useState回调效果
当使用hook的useState的时候,我们会需要更新完数据之后执行一个回调方法,但是useState没有回调,怎么办呢,通过useEffect来达到同样效果问题环境:组件加载完成之后我要请求一个接口,拿到接口返回的数据之后再将它打印出来初次想法 const [data, setData] = useState({}); // 组件加载时执行一次 useEffect(() =>...原创 2020-02-14 10:04:54 · 6776 阅读 · 1 评论 -
antd中Form组件表单校验使用的Form.create()
两种用法注意: 这两种方式都要return一个jsx,要不然会报错类组件class CustomizedForm extends React.Component {...代码}CustomizedForm = Form.create({})(CustomizedForm);export default CustomizedForm函数组件const aaa =(form...原创 2020-02-13 10:48:32 · 5945 阅读 · 0 评论 -
react的img标签路径使用方式
使用import导入import imgURL from './../images/photo.png';<img src={imgURL } />使用require导入(require里面只能写字符串, 不能写变量)<img src={require('./../images/photo.png')} />...原创 2020-01-15 11:24:41 · 2858 阅读 · 0 评论 -
使用react的使用this.props.history.push()报错
使用react进行js方法进行路由跳转的时候,我一个组件要跳转到另外一个路由,但是使用this.props.history.push(“路径名”)的时候给我报错,从别的页面跳转回这里也没问题,去打印this.props是一个form对象,打印this.props.history的时候是undefined,说明父组件并没有传递一个history过来解决方法: 到父组件中传递一个this.props...原创 2020-01-15 11:22:20 · 3793 阅读 · 0 评论 -
将excel表的数据导入
import React from 'react'import XLSX from 'xlsx'class List extends React.Component { onImportExcel = file => { // 获取上传的文件对象 const { files } = file.target; // 通过FileRe...原创 2019-12-17 15:03:31 · 407 阅读 · 0 评论 -
react中多个onChange事件复用
在react中input的value是通过this.state.value动态绑定的,动态的修改需要通过onChange事件,但是如果有好多个input需要动态修改,但是事件又是一样的,只是value的值不一样,这时候就需要onChange事件的复用了<Input value = {this.state.name} onChange = {(e) => {this.changeIn...原创 2019-12-05 11:28:22 · 2477 阅读 · 0 评论 -
关于react项目引入antd样式的问题
创建react项目安装antd依赖前两步都没有什么问题,不多说了这个时候使用antd的组件是这样使用的import Button from 'antd/es/button';import './App.css';在App.css的文件中还要导入antd/dist/antd.css用起来特别的麻烦如何按需导入并且样式自动导入呢?安装customize-cra$ y...原创 2019-12-03 17:37:56 · 2093 阅读 · 0 评论 -
react环境的搭建
本地安装nodejs和淘宝镜像cnpm(参见vue环境搭建)全局安装脚手架工具,安装之后就能够使用r命令eact项目了npm install -g create-react-app到你想创建的目录下开始创建项目create-react-app test01创建完项目之后就能够进行测试了,他会有命令提示cd test01;yarn start这里的yarn是我创建项...原创 2019-10-31 11:32:09 · 94 阅读 · 0 评论