React踩坑笔记 —— React

【React踩坑笔记 —— React】的更多相关文章

React踩坑笔记 —— React

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

react踩坑笔记

1.create-react-app中配置webpack // 方法一:将项目的配置文件抽取到项目中,即运行: npm run eject // 方法二:使用react-app-rewired 2.create-react-app中src文件夹的别名,当使用了ts时可以在tsconfig.json中配置 "compilerOptions": { "baseUrl":"src", "paths":{ "src/*&qu…

EntityFramework CodeFirst SQLServer转Oracle踩坑笔记

接着在Oracle中使用Entity Framework 6 CodeFirst这篇博文,正在将项目从SQLServer 2012转至Oracle 11g,目前为止遇到的问题在此记录下. SQL Server中datetime类型所能表示的时间范围是1753-01-01 00:00:00.000至9999-12-31 23:59:59.998之间.在.NET中DateTime的初始值是0001-01-01 00:00:00.000000,该值超出SQL Server中datetime所能表示的范…

CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记

CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记 cas服务器的搭建导出证书(1和2步骤是找了课程,随便写了一下存记录,不过对于自己测试不投入使用应该不影响) C:\Users\Ddlm2>keytool -genkey -alias testcas -keystore D:/testcas -storepass 123456 -keyalg RSA -validity 3650 您的名字与姓氏是什么? [Unknown]: test 您的组织单位名称是什么? [Unknow…

react 入坑笔记（四） - React 事件绑定和传参

React 事件处理建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick="activateLasers()"> // onClick = "xxxx()" 激活按钮 </button> react 中的写法: <button onClick={activateLasers}> // onclick = { xxxx…

新版react踩坑总结

使用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&…

ES踩坑笔记

现在开始在业务上使用ES,记录一些踩坑经历,做点笔记. 2018-11-13 source不返回问题使用了角色校验,客户端插入成功之后获取数据没有source,和查询参数无关. 检查mapping,发现获取mapping也是空... 如下: {'test_index': {'mappings': {'test_doc': {'properties': {}}}}} 排查了一会儿..找不出原因. 后来要到了一个高权限的账号去kibana看了眼...发现能获取的fields为空... ... e…

微信小程序使用pako.js的踩坑笔记

问题今天组长跟我们讨论了个问题,说是文章存储占用有点大,消耗宽带流量费,让我看看能不能找个方法解决一下(文章存储的是html字符串).第一反应是没什么头绪,能想到的就是将相同的字符串替换成一个标识之类的,小程序再通过标识替换回原本的字符(感觉就不是很靠谱...). 后来发现真的不靠谱,首先每篇文章样式可能都不一样,需要很多对应的字典,即使是这样大概预估了下,也减少不过10多k左右.唉,还是面向百度编程吧,看看有没有什么别人写好的模块可以用一下. 然后就找到了pako.js,具体实现是本地gzi…

Vue3.x+element-plus+ts踩坑笔记

闲聊前段时间小颖在B站找了个学习vue3+TS的视频,自己尝试着搭建了一些基础代码,在实现功能的过程中遇到了一些问题,为了防止自己遗忘,写个随笔记录一下嘻嘻项目代码 git地址:vue3.x-ts-element-plus--demo 踩坑集合: 1.根据 element-plus 官网提示按需引入组件后,遇到:ElLoading.ElMessage.ElNotification.ElMessageBox 样式丢失起因是小颖在封装 axios 时,发现引入的 ElNotifica…

react 入坑笔记（三） - Props

React Props props - 参数. 组件类 React.Component 有个 defaultProps 属性,以 class xxx extend React.Component 形式创建的组件够可以通过属性来控制传入组件的参数,如下例: // 创建 HelloMessage 组件 class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h…

【React踩坑记一】React项目中禁用浏览器双击选中文字的功能

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

航遇项目react踩坑

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

react 入坑笔记（六） - 组件的生命周期

React 组件生命周期详细参考: react 组件生命周期组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3.Unmounting:已经移出 DOM 树: 生命周期的钩子函数:(v16之前) 1. componentWillMount 首次渲染之前调用: 2. componentDidMount 第一次渲染后调用: 3. componentWillReceiveProps 在组件接收到一个新的 prop…

react 入坑笔记（五） - 条件渲染和列表渲染

条件渲染和列表渲染一.条件渲染条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: function UserGreeting(props) { return <h1>欢迎回来!</h1>; } function GuestGreeting(props) { return <h1>请先注册.</h1>; } function Greeting(props…

react 入坑笔记（二） - State

React State 一. state 大致思想:在 react 中,每个组件都是一个状态机,通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致.React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } re…

react 入坑笔记（一）

一些概念: 1.组件:概念等同于 vue 中的组件,字面意思,不过 vue 中组件是以 .vue 结尾,通过 vue-loader 编译成 js,而 react 组件就是 js. 2.jsx:js 语法扩展,编译器遇到 html 标签按照 html 编译,遇到 js(就是 { xxx }) 按照 js 规则编译,类型安全. 3.单项响应的数据流 - 这点暂时没明白. 一.核心库 import React from 'react'; import ReactDOM from 'react-dom'…

React 踩坑记录

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…

【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)

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

【React踩坑记六】create-react-app创建的react项目通过iP地址访问(实现局域网内访问)

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

【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

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

【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component

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

【React踩坑记二】react项目实现JS路由跳转

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

React踩坑记

一: Support for the experimental syntax 'classProperties' isn't currently enabled ERROR in ./src/index.js Module build failed (from ./node_modules/_babel-loader@8.0.5@babel-loader/lib/index.js): SyntaxError: F:\Front-end items\vs code\react-2\src\inde…