React
react 路上的磕磕绊绊
梦想身高1米8
这个作者很懒,什么都没留下…
展开
-
useEffect,函数组件挂载和卸载时触发
1 不带参数第一次渲染之后和每次更新之后都会执行<html><head> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin><原创 2022-06-01 11:54:41 · 3811 阅读 · 0 评论 -
react-to-print 打印
1 下载npm install --save react-to-print2 引用import ReactToPrint from 'react-to-print';3 调用 //触发按钮<ReactToPrint trigger={() => <a href="#">点此打印</a>} content={() => this.ref}/>//打印内容<div ref={el => (this.ref = el)}原创 2021-03-03 17:23:35 · 8032 阅读 · 2 评论 -
图表 dodge is not support linear attribute, please use category attribute
横坐标是连续的日期导致解决方法scale中设置横坐标的type为cat原创 2021-02-06 14:11:10 · 746 阅读 · 0 评论 -
react 封装组件时需要注意的事项
https://www.jianshu.com/p/8eeee57ce02f原创 2021-01-27 16:22:16 · 727 阅读 · 2 评论 -
react 获取子组件数据
1 子组件添加ref属性<Child ref ='demo'>父组件调用this.refs.demo.state或this.refs.demo.props2 子组件添加事件属性<Child onRef={ref => this.child=ref}>子组件内调用onRefcomponentDidMount() { this.props.onRef(this)}父组件调用this.child.state或this.child.props注意:即使原创 2021-01-21 17:09:27 · 825 阅读 · 0 评论 -
react props更新页面数据没有变化 componentDidUpdate真的有用
子组件将props的值存放到state之后,(componentDidMount中调用setState或直接给state赋值this.props.xx)使用state中的值而不是直接调用this.props.xx,props的更新不会修改state中的值,(页面数据不会发生变化!!!)、如果需要时时更新页面数据的话1 直接使用this.props.xx但是当前值需要处理,必须放到state中就没办法了2 在...原创 2021-01-21 16:42:53 · 3664 阅读 · 0 评论 -
antd DatePicker format方法
将时间转化为固定格式,比如YYYY/MM/DD注意参数大小写1 picker=‘date’ 年 月 日.format('YYYY-MM-DD')2021-1-202 picker=‘year’ 年.format('YYYY')20213 picker=‘quarter’ 季度.format('YYYY-MM-DD')2021-112021-222021-332021-444 picker=‘month’ 年 月.format('YYYY-MM-DD')2021-015 pi原创 2021-01-20 15:50:39 · 3045 阅读 · 0 评论 -
React ×Unhandled Rejection (Error): Maximum update depth exceeded.
render中直接执行事件导致onChange={this.onChange()}原创 2020-12-08 14:45:05 · 263 阅读 · 0 评论 -
antd v3 升v4
react 16.8升级至17.0.1npm install react@17.0.1 react-dom@17.0.1升级react执行发生错误时:npm install @babel/runtimeantd 3.X 升级至最新yarn add antd 升级antdnpx -p @ant-design/codemod-v4 antd4-codemod src 安装兼容包执行发生错误时:npm install --save @ant-design/icons执行发生错误时:npm i..原创 2020-12-08 11:06:42 · 338 阅读 · 0 评论 -
react 将函数绑定到组件实例 / 绑定事件
render() { return <button onClick={this.handleClick}></button>}1、在constructor中绑定constructor(props) { super(props); this.handleClick = this.handleClick.bind(this);}handleClick() { 函数处理}2、类属性handleClick = () => {原创 2020-11-11 11:03:36 · 614 阅读 · 0 评论 -
antd Upload使用
<Upload // 上传地址 action="/basic-config-manage/basic/exportAndImport/processFlow/import" // 发到后台的文件参数名,默认就是file name='file' // 请求头,一般会加鉴权信息 headers={{ Authorization: localStorage.getItem('token') || null }} // 是否显示原创 2020-11-03 15:48:38 · 1987 阅读 · 0 评论 -
react 中使用 echart(ReactEcharts和渐变色)
1、导入import ReactEcharts from 'echarts-for-react';import * as echarts from 'echarts'; //渐变色2、使用<ReactEcharts option={option} style={{ width: '100%', height: '50%' }} />3、option常用定义const option = { // 图表周围空白边距(内边距) grid: { top:原创 2020-11-03 15:27:48 · 1438 阅读 · 0 评论 -
React 函数组件 和 类组件
1、函数组件 接受一个单一的props对象并返回一个React元素类组件 继承 React.component,返回 render(){ return React元素 }2、函数组件的性能比类组件性能高,类组件使用时需要实例化,函数组件直接执行函数返回结果3、类组件与this,有生命周期,有状态state,函数组件没有4、React组件都是纯函数,禁止/不能修改props都是单项数据流,父组件改变了属性,子组件视图会更新属性props是外界传递过来的,状态state是组件本身的,状态可以任意修原创 2020-05-17 15:46:35 · 217 阅读 · 0 评论 -
React 生命周期/生命周期方法
1、挂载组件实例被创建并插入dom时constructor()getDerivedStateFromProps()render()componentDidMount()2、更新props/state改变时shouldComponentUpdate()render()getSnapShotBeforeUpdate()componentDidUpdate()3、卸载componentWillUnmount()...原创 2020-05-17 15:37:35 · 117 阅读 · 0 评论 -
React antd MonthPicker 月份转月初至月末
React antd MonthPicker 月份转化为YYYY-MM-DD的第一天到最后一天憨憨的我也不知道为什么不用RangePick组件1、引入antd 不说了2、使用MonthPicker<MonthPicker placeholder='请选择时间' format={'YYYY/MM'} onChange={e => this.handleMo...原创 2020-03-30 15:30:08 · 1688 阅读 · 0 评论 -
React Antd Upload上传文件前弹窗询问
React Antd Upload上传文件前弹窗询问1、导入Upload组件2、使用Upload组件3、配置Upload组件1、导入Upload组件Import { Upload } from ‘antd’别问react中怎么配置antd,问就是不知道,只是听说可以使用$ npm install antd –save 或者 $ yarn add antd2、使用Upload组件<...原创 2020-03-30 11:17:25 · 2816 阅读 · 3 评论