react
文章平均质量分 69
chenxiaoyi0207
这个作者很懒,什么都没留下…
展开
-
react-monaco-editor使用
1.版本"react": "^17.0.2","@craco/craco": "^6.2.0","monaco-editor": "0.27.0","monaco-editor-webpack-plugin": "4.1.2",2.使用react-monaco-editor代码import React, { useState, useRef } from 'react';import MonacoEditor from 'react-monaco-editor';function ME原创 2021-11-23 17:15:13 · 5004 阅读 · 0 评论 -
antd EditableProTable 如何修改校验样式
组件库地址:https://procomponents.ant.design/components/editable-table一、默认校验错误样式1.效果图2.对应代码columns中“活动名称”的配置项{ title: '活动名称', dataIndex: 'title', width: '30%', formItemProps: { rules: [ { required: true, whitespace: true,原创 2021-11-23 16:43:44 · 1560 阅读 · 0 评论 -
MemoryRouter离开页面弹窗确认
版本:都是最新版本React17 + React-Router5使用create-react-app搭建的工程0.前言可能许多人和我的场景一样,第2点讲述了我的问题发生背景,可以跳过,但这也是我选择MemoryRouter的原因。使用MemoryRouter只是一种方式,可以看下第4点的其他方式。1.需求描述离开表单页前,如果表单还没有保存,需要让跳转路由的操作停下来,弹出确认弹窗让用户判断是否的确是不保存离开页面。2.问题发生背景本来是用HashRouter做的SPA应用,就是#/xxx这原创 2021-10-15 22:14:09 · 1428 阅读 · 1 评论 -
微前端方案
1.iframe传统的是使用iframe,切换iframe的src实现切换页面。iframe性能差,不能使用redux(因为换掉页面的话,就把window对象换掉了,redux是同一个window下使用1个),每次打开菜单页面都要重新加载所有的静态资源(虽然使用多页面打包能缓解这个问题带来的白屏影响,因此这个可以用在多页面打包中)。2.react-routerApp.js入口文件中使用菜单框架组件,嵌入路由切换组件,即原App.js中的内容。菜单框架组件内容区域展示props.children。优点是原创 2021-10-08 15:07:56 · 158 阅读 · 0 评论 -
201907学习计划-回顾react基础
一、react基础漏洞二、工作过程中遇到的基础问题三、熟悉react代码规范四、继续学习react框架的方向原创 2019-07-11 18:43:09 · 176 阅读 · 0 评论 -
eslint报错 import/no-unresolved
Unable to resolve path to module ‘views/homepage/home’.eslint(import/no-unresolved)推荐解决方案:https://stackoverflow.com/questions/41769880/how-to-manually-add-a-path-to-be-resolved-in-eslintrc...转载 2020-04-26 17:29:58 · 9187 阅读 · 1 评论 -
低版本antd二级表头、onRow方法扩展
查看Demo->代码仓库:https://gitee.com/chenxiaoyi27/rc-compdemo代码路径:src/views/demo/exTable.js效果图一、表格分组利用原生table的colSpan和rowSpan。表头columns需写一个children来添加二级表头,示例代码如下:this.columns = [ { title: '姓名', ...原创 2020-03-16 07:11:34 · 2468 阅读 · 0 评论 -
window.print react+antd 分页打印 去掉页眉页脚
框架:react+antd一、代码:window.print();二、分页打印+谷歌打印的css样式我这里是表格的打印,表格数据很多,打印时需要分页。浏览器打印工具自动分页,Table的表头会自动显示在第2页上,但是顶着第2页的顶部,没有上边距,且上一页页尾也没有下边距,还有表格行拆开的样式。为了解决这些样式丑的问题,决定手动分页。未打印状态显示完整的1个表格,打印状态时,将1个表格拆...原创 2020-01-05 11:11:22 · 2828 阅读 · 1 评论 -
react 双击
this.count=0;onDoubleClick() { // 双击 if (e.node.props.eventKey.indexOf('-') > -1) { this.count += 1; setTimeout(() => { this.count === 2 ...转载 2019-10-21 17:08:54 · 3261 阅读 · 0 评论 -
critical dependencies
critical dependencies: the request of a dependency is an expression报警告原因:let src='xxxx';<img src={require(src)} />改成字符串模板即可,如下:let src='xxxx';<img src={require(`${src}`)} />...原创 2019-10-11 13:58:09 · 1028 阅读 · 0 评论 -
react antd Table组件使用radio单选框 更新选中数据不渲染的问题
之前:type:‘radio’selectedRowKeys:this.state.selectedRowKeysonChange:(selectedRowKeys)=>{this.setState({selectedRowKeys});}然后在页面其他地方更新state.selectedRowKeys时,表格中的单选情况没有发生改变,比如将selectedRowKeys清...原创 2019-08-13 10:32:14 · 6792 阅读 · 2 评论 -
react 事项日历
matterCalendar.jsimport './matterCalendar.less';import React from 'react';import { Row, Col, Button, Table, Tooltip, message } from 'antd';const WEEK = ['日', '一', '二', '三', '四', '五', '六'];class ...原创 2019-08-14 10:39:11 · 365 阅读 · 1 评论 -
react antd(0.11v) 渲染树形结构
1.自己写div 和 pcreateTree(subMenu){ return (<div> {subMenu.map((v,i)=>{ if(v.subMenu && v.subMenu.length>0){ return <p>...原创 2019-06-24 15:07:51 · 1714 阅读 · 3 评论 -
react className加js判断
可行1.ES6 模板字符串 ``className={`title ${index === this.state.active ? 'active' : ''}`}2.join组成字符串className={["title", index === this.state.active?"active":null].join(' ')}3.依赖classnames【git地址】4.多...原创 2019-06-21 15:02:30 · 4512 阅读 · 0 评论 -
react 局部打印
import React, { Component } from 'react'import {Row, Col,Button} from 'antd'class Print extends React.Component{ constructor (props) { super(props); this.state={ pri...原创 2019-03-27 16:38:48 · 1419 阅读 · 2 评论 -
【转载】Redux入门教程(三)-阮一峰
Redux 入门教程(三):React-Redux 的用法作者: 阮一峰日期: 2016年9月21日链接:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html前言前两篇教程介绍了 Redux 的基本用法和异步操作,今天是最后一部分,介绍如何在 React 项目中使用 Redux。...转载 2019-02-19 09:39:15 · 921 阅读 · 0 评论 -
【转载】Redux入门教程(二)-阮一峰
Redux 入门教程(二):中间件与异步操作作者: 阮一峰日期: 2016年9月20日链接:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html前言上一篇文章,我介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新...转载 2019-02-18 17:25:42 · 1504 阅读 · 0 评论 -
【转载】Redux入门教程(一)-阮一峰
Redux 入门教程(一):基本用法作者: 阮一峰日期: 2016年9月18日链接:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html前言一年半前,我写了《React 入门实例教程》,介绍了 React 的基本用法。React 只是 DOM 的一个抽象层,并不是 Web 应用...转载 2019-02-18 17:03:32 · 1985 阅读 · 0 评论 -
react遇到this.setState报错未定义或不是个函数
情况是使用了0.11版本antd的showConfirm,其他很多情况也类似,不一一举例了,代码如下:onOk:function(){ this.setState({ //报错:this.setState()是未定义的函数 ...... }); }原因:function改变了this的指向,让this指向onOk这个函数本身解决办法:匿名函数不会改变this的指向,还是...原创 2019-01-28 10:38:01 · 3498 阅读 · 1 评论 -
在antd项目中使用iconfont图标
经常会使用iconfont的图标,因此记录方法。一、官网介绍二、使用方法1.进入iconfont.cn-&gt;图标管理,点击下图按钮,新建项目2.填写项目基本信息3.创建完成,点击上传图标至项目将从iconfont图标库中下载的svg文件拖入上传区域中提交4.生成代码这样就生成了react项目Icon.createFromIconfontCN中的参数scriptU...原创 2019-01-14 12:32:05 · 15038 阅读 · 11 评论 -
2019年01月14日-按需引入antd遇到injectBabelPlugin is not a function问题-后续官网及时给出了正确方法,不再有此问题
一、按官网方法下载安装配置【传送带-&gt;antd-&gt;在 create-react-app 中使用】create-react-app创建react项目$ npm install -g create-react-app yarn$ create-react-app antd-demo$ cd antd-demo$ yarn start引入antd$ yarn add...原创 2019-01-14 10:50:09 · 2237 阅读 · 0 评论 -
react搭建项目遇到的问题
一、安装依赖1.Error: Cannot find module 'react-dev-utils/chalk'删除当前node_modules,重新安装2.快速删除node_modules避免了删除速度慢、没有管理员权限的问题cnpm install rimrafrimraf node_modules...原创 2019-07-18 14:23:41 · 2614 阅读 · 0 评论 -
react项目alias配置
一、配置找到webpack.config.js文件,在resolve下的alias中添加根目录。alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/...原创 2019-07-29 18:52:08 · 5387 阅读 · 0 评论 -
react 前台模糊查询
【转载自前端独立实现模糊查询–filter()与match()】filter()用法match()用法模糊查询teacherList = allTeacherList.filter(val => val.match(searchContent));转载 2019-07-02 19:20:25 · 5182 阅读 · 0 评论