React系列
关注
分享
扫一扫
文章平均质量分 60
Jane_96
谁说妹子不可以写代码的
展开
-
React创建项目文件之自己搭建和运用脚手架搭建
1、WebStrom建立React App方式一：新建文件终端运行npm init，填写package.json文件信息终端运行npm install react --save，参数save是安装完成之后更新到package.json文件中终端运行下面这些命令等 npm install react react-dom --save npm install babel babel...原创 2018-05-30 09:25:12 · 2016 阅读 · 0 评论 -
react-infinite-scroller组件滚动分页加载
// 部分代码片段import InfiniteScroll from 'react-infinite-scroller';import {Scrollbars} from 'react-custom-scrollbars';//初始的state的状态this.state = { loading: true, hasMore: true, pageNum: 1, pageSize...原创 2018-12-15 15:59:17 · 12236 阅读 · 0 评论 -
react 项目支持 装饰器写法 Support for the experimental syntax 'decorators-legacy' isn't currently enabled
npm install @babel/plugin-proposal-decorators安装后再package.json里面加一句话（babel里面plugins那句）： "babel": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy"...原创 2019-01-12 17:59:41 · 22687 阅读 · 9 评论 -
React按需加载Antd CSS
在React项目中，直接用create-react-app脚手架搭建之后的项目时不能按需加载Antd的css，必须要在用组件的地方手动引入css。在package.json文件中设置一下，便可以在项目中按需加载css样式："babel": { "plugins": [ [ "import", { "libraryName"...原创 2019-01-12 21:18:00 · 1671 阅读 · 0 评论 -
React 向url中添加参数
用@withRouter修饰组件，把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上使用queryString去序列化需要添加的参数：queryString.stringify({ name:liff, id:1111})// return name=liff&id=1111在prop...原创 2019-01-29 10:58:02 · 8832 阅读 · 0 评论 -
React 控制台报错
报错内容Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the ...原创 2019-04-20 11:52:52 · 554 阅读 · 0 评论 -
mobx判断observable中值类型是数组还是对象
在使用mobx过程中，需要判断observable中的值的类型是否是数组，然后有了如下写法：Array.isArray(this.props.defaultStore.result)结果是： 无论result里面是不是数组，表达式都返回false。。 查看了一下官方文档，发现官方文档里面有这么一段话 请记住无论如何 Array.isArray(observable([]))...原创 2018-09-06 16:14:30 · 4230 阅读 · 0 评论 -
React webpack 开启 gzip 压缩 报错 ValidationError: Compression Plugin Invalid Options
报错内容：$ npm run build> nuistoj@0.1.0 build D:\_DATA_\webStormProject\nuistoj> node scripts/build.jsD:\_DATA_\webStormProject\nuistoj\node_modules\schema-utils\src\validateOptions.js:32 ...原创 2019-05-04 10:23:23 · 2875 阅读 · 0 评论 -
PureComponent和Component的区别
PureComponent和component相比，PureComponent通过prop和state的浅比较来实现shouldComponentUpdate，在某些情况下，用PureComponent可以提高页面的渲染性能。// shallowEqual 会比较 Object.keys(state | props) 的长度是否一致，每一个 key 是否两者都有，// 并且是否是一个引用，也就...原创 2019-08-13 17:34:19 · 897 阅读 · 0 评论 -
React 路由报错 You should not use <Route> or withRouter() outside a <Router>
App.js在中的代码import React, {Component , Fragment} from 'react';import {withRouter , Route , Switch , Redirect} from 'react-router-dom';import './App.css';import 'antd/dist/antd.css'import Home from...原创 2018-12-03 11:48:01 · 17034 阅读 · 4 评论 -
axios合并异步请求
axios合并异步请求，比如页面初始化的时候需要进行三次请求，而我们需要在这三个请求都结束后进行操作。但是由于我们无法确认异步什么时候结束，所以可以使用axios请求来将三个请求合并发送（注意：发送的仍然是三个请求，并不是合并成了一个请求），最后可以等这三个请求都结束后开始想进行的操作initData1 = () => { return axios.get(baseUrl1, {...原创 2018-10-25 11:13:02 · 4195 阅读 · 0 评论 -
Ant Design Table换滚动条的样式
我修改的是表格的固定列滚动而产生的滚动条引用Table的组件的css文件中加入下面的样式：.ant-table-body{ &amp;::-webkit-scrollbar { height: 5px; } &amp;::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box...原创 2018-09-30 10:17:30 · 16989 阅读 · 1 评论 -
React——基础Count案例解析
1. 创建项目文件夹用官方给的脚手架直接创建项目文件夹，关于搭建项目文件夹，可以参照之前的一篇博文React创建项目文件之自己搭建和运用脚手架搭建 我这里就直接采用脚手架搭建create-react-app react-count然后进入react-count文件夹下面，运行命令npm startReact会自动监听3000端口，如果浏览器出现以下页面说明第一步创建项目文...原创 2018-06-14 14:30:25 · 1288 阅读 · 0 评论 -
create-react-app 搭建项目报错Unexpected end of JSON input while parsing near...
错误：jane@ljj ~/WebstormProjects $ create-react-app test-react-appCreating a new React app in /home/jane/WebstormProjects/test-react-app.Installing packages. This might take a couple of minutes....原创 2018-06-09 14:48:02 · 6360 阅读 · 2 评论 -
React和Redux学习总结
1. prop和state的区别prop用于定义外部接口，state用于记录内部状态prop的赋值在外部世界使用组件时，而state的赋值在组件内部组件不应该改变prop的值，而state存在的目的就是让组件来修改的2. 生命周期之装载过程constructor：ES6中的每个类的构造函数。目的：初始化state;绑定成员变量this的环境。getInitialState：...原创 2018-06-09 20:45:48 · 416 阅读 · 0 评论 -
原生js实现React拖拽效果（resize）附带完整的demo
想找一个可以resize块的组件，找了好几天都没找到合适的。尝试过的开源组件： “react-rnd”：被拖拽的块采用的布局方式是“position:absolute”,更改布局的话拖拽的事件会失效，没有仔细去研究原理。但是我是在不知道这个布局怎么去比较好的兼容页面的flex布局，所以放弃了这个组件网上查到的大多数拖拽组件是Draggable拖拽，多用于块的拖拽排序等，而我需要的是res...原创 2018-07-31 20:37:39 · 5264 阅读 · 3 评论 -
npm ERR! Cannot read property 'match' of undefined 错误处理
跟往常一样运行npm install 的时候，突然报错。错误情况如下：npm ERR! Cannot read property 'match' of undefinednpm ERR! A complete log of this run can be found in:npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs...原创 2018-08-06 11:44:46 · 49226 阅读 · 1 评论 -
React 将字符串解析成HTML的DOM节点
&lt;div dangerouslySetInnerHTML={{__html: '&lt;h3&gt;this is content&lt;/h3&gt;'}}&gt;&lt;/div&gt;这个可以将带有html的字符串转变成dom节点，后台传来的字符一定要是未转义的...原创 2018-08-31 22:12:56 · 5629 阅读 · 0 评论 -
React input 获得焦点/失去焦点判断
{/*render中写方法*/}inputOnBlur = ()=>{ this.setState({ isShowCheckBox:false }) } inputOnFocus = ()=> { this.setState({ isShowCheckBox:true }) }{/*return中组件内容*...原创 2018-08-30 15:38:52 · 32616 阅读 · 3 评论 -
TypeError: Cannot read property 'children' of undefined 八成是没判空惹的锅~
Ant design 表格报错：TypeError: Cannot read property 'children' of undefined这个报错表明表格中给的columns或者data有问题，比如columns为空，或者data里面有格式不对的数据（某一行数据为undefined）我排除了一下代码报错的原因，就是因为有一行数据为undefined。。所以报错了。在对后端返回的数据进行格式...原创 2018-09-26 10:17:04 · 17986 阅读 · 0 评论 -
compression-webpack-plugin GZip插件打包报错 ValidationError: Compression Plugin Invalid Options
安装插件： yarn add compression-webpack-plugin配置webpack.js ：const CompressionPlugin = require("compression-webpack-plugin");return ( plugins: [ new BundleAnalyzerPlugin(), isEnvProductio...原创 2019-08-19 16:37:26 · 2541 阅读 · 0 评论