常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" ></div> 但是在React中,是没有onselectstart事件的 我们只需要给标签添加个样式就可以了. .node{/*node为标签的class名*/ -webkit-user-select: none; -moz-user-select:none; -o-user-select:…

最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. 1.安装 yarn add react-ace //或 npm install react-ace 2.在项目中引入 import AceEditor from 'react-ace'; 3.在组件中使用 <AceEditor ref="editor" mode="mysq…

使用es6语法与原本es5语法几个有区别的地方 1.React.creatClass与React.Component var Component = React.createClass({ render() { return ( <div></div> ); } }); class Component extends React.Component { constructor(props) { super(props); } render() { return ( <div&…

1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态渲染iconfont标签,需如下处理,icon为形参 <i dangerouslySetInnerHTML={{__html: icon}} className={'iconfont'} /> c.引入项目中:需要在项目中复制iconfont的地址代码,类似如下的地址,官网生成 @font-fac…

1.React-router error: super expression must either be null or a function 原因:引入babel后写ES6风格的代码: class ComponentXX extends React.component{} 这里的C小写了,导致产生这个bug 改为大写就可以 ,不引入router不会产生这个bug 2.React-router 引入Link的时候,在ES6风格的代码下应该这样写: import {Link} from "rea…

最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少走一些弯路. 安装依赖 yarn add xlsx //或 npm install xlsx 项目中引入 import * as XLSX from 'xlsx'; 上传组件(antdesign的上传组件) <Dragger name="file" accept={this.stat…

意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中isShowNav的值. 解决方法 我们应该在组件销毁的时候将异步方法撤销 this.setState = (state, callback) => { return; };…

这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 this.props.history.push("/dashboard/add")…

同项目组的小伙伴想用自己的电脑访问我电脑上开发阶段的create-react-app创建的react项目. 试过了了各种内网穿透工具ngrok以及localtunnel等. 奈何打开效率实在太过于龟速. 于是不得不百度 react项目如何开启内网访问 结果找了说是要配置webpack. 好吧,配就配... 可是对于还没有eject的项目来说,webpack配置没暴露出来,没法配啊. 果断npm run eject. eject后报了一大堆错.掰着指头数下来有5,6,7,8个~ 直接npm sta…

Webpack提供了自己的导入方式require.include,但同时也支持commonjs规范或AMD规范的require语法,而Node.js使用的就是common.js,ES6的语法Import也会被Babel转化成commonjs格式或者是AMD格式. ES6.CommonJS的导入是单例的: 单页应用默认直接加载出所有import的资源,所以: JS中的全局调用和表达式总会一开始就被执行,可以使用require()/import()语法实现动态加载.按需加载.可以配合Lazy(htt…