React
__Zoe__
Time will tell.
展开
-
项目中使用 阿里巴巴矢量图标库 iconfont
将选中的图标加入购物车 将购物车中的图标加入到项目 将代码库下载到本地 将解压后的文件放到本地代码库【红框中的四个】 将iconfont.css中的iconfont改成icon,具体如下 代码里将此css引入即可使用 // 引入阿里图标库import './static/css/iconfont.css';// 组件库中使用<AtIcon prefixClass='icon' value="good" color={is_like === 1 ? '#ff4d4f' : '#3e原创 2021-07-22 18:34:43 · 178 阅读 · 0 评论 -
antd request中window.g_app._store.dispatch失效
问题:使用window.g_app._store.dispatch失效(session过期,后端返回401错误,但是没有跳转到登录页)在全局调用dva的数据及dispatch方法(比如:request.js里调用)解决方案:window.g_app._store.dispatch改用getDvaApp()._store.dispatch 就可以了import {getDvaApp} from 'umi';/** * 401 错误处理方法 */const error401Han..原创 2021-04-14 17:56:07 · 1683 阅读 · 1 评论 -
antd - 表单中集成富文本编辑功能【BraftEditor】
首先安装 braft-editornpm install --save braft-editor完成安装后就可以引用 braft-editor和cssimport BraftEditor from ‘braft-editor’;import ‘braft-editor/dist/index.css’;组件里的应用// 第一步const controls = [ 'undo', 'redo', 'separator', 'font-size', 'line-hei..原创 2020-08-05 17:22:39 · 4740 阅读 · 1 评论 -
react中实现简单倒计时关闭页面
首先在constructor中设置5秒的时间值constructor (props) { super(props) this.state={ seconds: 5, dlgTipTxt: '5s后关闭页面' }; }componentDidMount中添加定时器componentDidMount () { let timer = setInterval(() => { this.setState((preState) =>({.原创 2020-07-01 12:41:11 · 944 阅读 · 0 评论 -
antd - 实现拖拽功能
最近开发,需要实现一个新功能:拖拽卡片到另一位置// 需要拖拽的Card<Card draggable={true} onDragStart={(e) => this.handleDragStart(e)> {contents}</Card>// 可放置的位置<Button block onDrop={e => this.handleDrop(e) onDrapOver={e => this.handleDrop(e)}>原创 2020-06-05 14:12:27 · 7389 阅读 · 0 评论 -
ant-design-pro 的 Charts 组件库 服务器打包出现的问题
本地环境没有问题,测试环境 npm run build 之后,访问出现如下错误,百度尝试了各种方法,都无效,最后发现是因为我安装的bizcharts的版本跟ant-design-pro的版本不一样,然后我重新安装了bizcharts和bizcharts-plugin-slider,...原创 2020-04-26 11:31:03 · 981 阅读 · 0 评论 -
React-class component 和 function component 的区别
1、function component:function aa(props) { return <h1>this is {props.name}</h1>}2、class component:class bb extends React.Component { render() { const { name } = this.props; retur...转载 2020-02-04 12:17:25 · 1685 阅读 · 0 评论 -
React-修改页面title
使用 react 的模块包:react-helmet步骤:安装:npm install react-helmet --save引入:import { Helmet } from ‘react-helmet’;代码中的使用<Helmet> <meta charSet="utf-8" /> <title>系统应用</title>...原创 2019-11-06 10:47:37 · 543 阅读 · 1 评论 -
React-PropTypes简单说明
https://www.cnblogs.com/huangqiming/p/10238196.html1、首先可以有那么多种类型12345678910propTypes: {// 可以声明 prop 为指定的 JS 基本类型。默认// 情况下,这些 prop 都是可传可不传的。optionalArray: React.PropTypes.array,optional...转载 2019-10-25 09:42:55 · 212 阅读 · 0 评论 -
React-lodash/debounce
debounce最主要的作用是把多个触法事件的操作延迟到最后一次触法执行,在性能上做了一定的优化。先简单介绍一下debounce,从最简单的一个场景入手,当用户不断点击页面,短时间内频繁的触法点击事件,只有在用户触法事件后的ns时间内,没有再触法事件,真正的监听函数才会执行,如果在这段时间内再次触法了事件,就需要重新计算这个ns。不使用debouncewindow.addEventLis...转载 2019-10-23 17:12:20 · 838 阅读 · 0 评论 -
React-PropTypes.element和PropTypes.node的区别
PropTypes.element:指React Element,即React.CreateElement生成的元素,React.CreateElement可以用jsx语法糖表示:<MyButton color="blue" shadowSize={2}> Click Me</MyButton>编译后为:React.createElement( MyBut...转载 2019-10-23 15:19:15 · 929 阅读 · 0 评论 -
React-classnames库(添加多个 className)
作用:添加多个 className使用的例子:外层index<FooterToolbar className={styles.footerToolbar} style={{ width }}> <Button type="primary" onClick={this.submit} loading={loading}> 提交 </Button&g...原创 2019-10-23 14:30:07 · 1626 阅读 · 0 评论 -
记录NVM安装nodejs的步骤
1、安装 nvm使用 nvm-setup.zip,以下表示安装成功2、配置镜像和设置代理镜像设置:nvm node_mirror: https://npm.taobao.org/mirrors/node/nvm npm_mirror: https://npm.taobao.org/mirrors/npm/如果公司使用代理的话:nvm proxy http://proxy.cmcc:...原创 2019-08-29 14:11:56 · 212 阅读 · 0 评论 -
ant-design-pro npm install安装报错
npm install 时报错类型:1、npm ERR! Unexpected end of JSON input while parsing near ‘…Vw9EwLULFMnAcWmvSOgfu’2、npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\Administrator\AppDat...原创 2019-08-29 17:06:32 · 4533 阅读 · 0 评论 -
React组件的生命周期函数
原创 2019-09-06 17:10:28 · 88 阅读 · 0 评论