react学习---antd的按需引入+自定主题
摘要：1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader 2.修改package.json .... "scripts": { "start": "react-app-rewired st
阅读全文
摘要：1.底层原理不一样： BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。 2.path表现形式不一样 BrowserRouter的路径中没有#,例如：localhost:3000/demo/test HashRout
阅读全文
摘要：withRouter可以加工一般组件，让一般组件具备路由组件所特有的API import React, { Component } from 'react' // 引入withRouter import {withRouter} from 'react-router-dom' class Heade
阅读全文
摘要：借助this.prosp.history对象上的API对操作路由跳转、前进、后退 -this.prosp.history.push() -this.prosp.history.replace() -this.prosp.history.goBack() -this.prosp.history.goF
阅读全文
摘要：import React, { Component } from 'react' import MyNavLink from '../../components/MyNavLink' import {Route,Switch,Redirect} from 'react-router-dom' imp
阅读全文
摘要：通过state参数传递的特点 通过state参数传递不会显示在地址栏中。 Link形式 路由形式 接收形式 备注：刷新也可以保留住参数
阅读全文
摘要：Link的形式 路由无需声明，自动接收 通过querystring库将查询字符转换为对象 解构赋值，并将查询字符的问号去掉
阅读全文
摘要：特点：路径中会暴露信息值，且需要声明接收 路由链接(携带参数)： //直接传属性 <Link to={'/demo/test/tom/18'}>详情</Link> //在该组件内部访问对象并传参 <Link to={`/demo/test/${obj.info1}/${obj.info2}`}>详情
阅读全文
摘要：1.注册子路由时要写上父路由的path值 2.路由的匹配是按照注册路由的顺序进行的 import React, { Component } from 'react' import MyNavLink from '../../components/MyNavLink' import {Route,Sw
阅读全文
摘要：1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由 2.具体编码： <Switch> <Route path="/about" component={About}/> <Route path="/home" component={Home}/> <Redire
阅读全文
摘要：1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致） 2.开启严格匹配：<Route exact={true} path="/about" component={About}/> 3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由 例子如下
阅读全文
摘要：1.public/index.html 中 引入样式时不写 ./ 写 / （常用） 2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用） 3.使用HashRouter (实际开发不会使用)
阅读全文
摘要：1.通常情况下，path和component是一一对应的关系。 2.Switch可以提高路由匹配效率(单一匹配)。 Switch只显示匹配到的第一个路由 import React,{Component} from 'react'; import {HashRouter as Router,Route
阅读全文
摘要：封装NavLink： 优化后的代码： 封装的NavLink组件：
阅读全文
摘要：路由的下载 react的路由需要额外下载，然后有三种，分别是供web，软件，两种都能用的any。然后我们主要用的是web，下载命令：npm i react-router-dom --save 然后在使用的地方进行引入，import {Link} from 'react-router-dom' 路由的
阅读全文
摘要：react脚手架配置代理总结 方法一 在package.json中追加如下配置 "proxy":"http://localhost:5000" 说明： 优点：配置简单，前端请求资源时可以不加任何前缀。 缺点：不能配置多个代理。 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会
阅读全文
摘要：需要将css文件重命名为 名字.module.css 并且 用import 名 from 'xxxx' 来引入 使用 名.类名 来给className赋类名 则可以避免类名冲突
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- %PUBLIC_URL%代表public文件夹的路径 --> <link rel="icon" href="%PUBLIC_URL%/favicon.ico"
阅读全文
摘要：创建项目并启动 第一步，全局安装：npm i -g create-react-app 第二步，切换到想创项目的目录，使用命令：create-react-app hello-react 第三步，进入项目文件夹：cd hello-react 第四步，启动项目：npm start react脚手架项目结构
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4_getSnapShotBeforeUpdate的使用场景</title> <style> .list{ width: 200px; height: 150p
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2_react生命周期(旧)</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2_不用函数柯里化的实现</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高阶函数_函数柯里化</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!--
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2_受控组件</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入re
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_非受控组件</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入r
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4_createRef</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!--
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3_回调ref中回调执行次数的问题</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_字符串形式的ref</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!--
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_字符串形式的ref</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!--
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对props进行限制</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test1"></div> <div
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对props进行限制</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test1"></div> <div
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对props进行限制</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test1"></div> <div
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>props基本使用</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test1"></div> <div
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>props基本使用</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test1"></div> <div
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>state简写方式</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>state</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入rea
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2_类式组件</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入re
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1_函数式组件</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入r
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsx小练习</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入re
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title{ background-color: orange; width: 200px; } </styl
阅读全文
