![](https://img-blog.csdnimg.cn/20200331233246901.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
React
船长㉿
这个作者很懒,什么都没留下…
展开
-
react 按需引入 Ant Design
如果不按需引入,项目大的情况下会影响性能,启动速度慢,需要对create-react-app 默认配置进行自定义 使用 react-app-rewired安装 react-app-rewired npm install react-app-rewired customize-cra --save 修改package.json, 把原来scripts里面的配置删掉,换成下面的 "scripts": { "start": "react-app-rewired start"原创 2020-06-09 16:19:19 · 524 阅读 · 0 评论 -
react使用ant报Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance
报错内容只有使用ant组件的时候才会报错,是因为react开启了严格模式去掉React.StrictMode,这样就不会报错了原创 2020-06-09 15:55:48 · 1282 阅读 · 0 评论 -
react部署之后到码云打开空白
1、修改package.json文件,添加"homepage":"."2、路由要使用HashRouter而不是BrowserRouterimport React from 'react';import { Provider } from 'react-redux';import { HashRouter as Router, Route } from 'react-router-dom...原创 2020-03-01 17:11:16 · 270 阅读 · 0 评论 -
React中动态切换类名
通过安装 classnames来管理类别npm install classnames --saveimport classNames from 'classnames';// high-speed-track 固定类名// 通过highSpeed是否存在来动态切换类名<div className={classnames('high-speed-track',{ 'item-...原创 2020-02-29 00:19:21 · 1342 阅读 · 0 评论 -
React中路由使用
安装router 官方文档npm install react-router-dom --save引入router精确匹配路由 exact// Link 相当于a标签import {BrowserRouter as Router, Route, Link} from 'react-router-dom';import Index from './pages/index';import...原创 2020-02-29 00:12:28 · 170 阅读 · 0 评论 -
React中state状态管理
使用immutable.js和redux-immutable来管理state中的状态,并进行每个模块state的拆分安装immutablenpm install immutable --save 安装redux-immutablenpm install redux-immutable 在App.js中引入 react-redux中的Provider ,引入store中的index.j...原创 2020-02-28 23:56:35 · 1124 阅读 · 1 评论 -
redux-devtools调试工具的安装
如果你已经科学上网(翻墙),那么就可以直接在谷歌应用商店直接搜索安装redux-devtools既可以。1可以通过GitHub上下载安装包解压即可安装地址打开网址,操作如图下载相关的版本点击Chrome浏览器右上角>更多工具>扩展程序,记得打开开发者模式,然后加载已经解压的安装包既可以...原创 2019-08-02 00:02:09 · 1035 阅读 · 0 评论 -
React使用官方动画库react-transition-group
npm install react-transition-group --save 安装官方动画库TransitionEventCSSTransitionTransitionGroup由着三个库组成官网地址import { CSSTransition,TransitionGroup } from 'react-transition-group';//引入动画库import './sty...原创 2019-07-24 17:31:36 · 697 阅读 · 0 评论 -
React使用prop-types验证数据类型
npm install prop-types安装一个叫prop-types的第三方包import PropTypes from 'prop-types'//引入第三方包//验证传递过来的值 TodoItem.propTypes = { test:PropTypes.string.isRequired,//isRequired表示该值必须要传 list:PropTypes.o...原创 2019-07-24 17:19:29 · 1239 阅读 · 0 评论 -
React实现一个ToDoList
父组件ToDoList.js写注释安住ctrl加反斜杠就会出现{/* */}dangerouslySetInnerHTML={{__html:item}}两条下划线可以在文本输入的时候识别标签this.state.list.map((item,index)=>{ return ( <li key={index+item} onCli...原创 2019-07-24 17:13:26 · 697 阅读 · 0 评论 -
React 生命周期函数
在组件即将被挂载到页面的时刻自动执行,只有在第一次挂载的时候执行componentWillMount(){console.log(‘componentWillMount’)}//组件被挂载到页面之后,自动被执行,只有在第一次挂载的时候执行componentDidMount(){console.log(‘componentDidMount’)}//组件被更新之前,会自动执行shou...原创 2019-07-24 16:28:49 · 105 阅读 · 0 评论