react
金刚腿
这个作者很懒,什么都没留下…
展开
-
结合高阶函数聊聊useMemo和useCallback
原文链接转载 2021-10-13 14:53:36 · 219 阅读 · 0 评论 -
react-router-dom 与 后台路由的混合搭配使用
目前web开发流行的前后台分离模式,但是实际开发中存在需要后台来控制部分路由的情况思路单独配置一个后台路由的对象数组待用代码先匹配前台路由不匹配的则去匹配上面配置的对象数组, 跳转所需要的路径具体代码后台路由配置: redirect.jsimport React from "react";import { Redirect } from "react-router-...原创 2019-09-24 11:00:42 · 490 阅读 · 0 评论 -
react非组件处理路由跳转
react组件中的跳转有Redirect, Link, withRouter高阶组件包裹跳转等等,但是对于非组件中,入请求接口统一封装调用后的判断, 这时需要创建history对象,调用对应方法跳转, 具体如下:先下载依赖:npm i history --save使用import { createHashHistory } from 'history'; // hash路由// ...原创 2019-04-20 12:22:33 · 2316 阅读 · 0 评论 -
解决ant design Tabs组件使得同一个子组件多次挂载的bug
当项目中使用react-loadable处理异步加载,ui使用了ant design的Tabs组件就会出现一些难以定位的错误例:<Tabs tabs={tab1} initialPage={nav1} tabBarPosition="top" renderTab={tab => <span>{tab.title}</span>} swipe...原创 2019-04-23 13:26:08 · 5285 阅读 · 1 评论 -
react-router-dom4.x按需加载
基于 react-loadable 来实现路由按需加载npm install --save react-loadableimport React from 'react';import ReactDOM from 'react-dom';import { Route , BrowserRouter, Switch } from 'react-router-dom';import {Pr...原创 2019-03-04 21:19:23 · 992 阅读 · 0 评论 -
react-router-dom4.x withRouter用法及函数式路由跳转
作用:将react-router 的 history、location、match 三个对象传入props对象默认情况下必须是经过路由匹配渲染的组件才存在this.props,才拥有路由参数,才能使用 函数跳转 的写法,执行this.props.history.push('/detail')跳转到对应路由的页面然而不是所有组件都直接与路由相连(通过路由跳转到此组件)的,当这些组件需要路由参数...原创 2019-03-07 10:42:33 · 5558 阅读 · 0 评论 -
解决create-react-app中antd配置主题的报错
首先安装 less, less-loader项目中暴露配置npm run eject项目\config\webpack.config.dev.js和webpack.config.prod.js中添加配置,如下:const lessRegex = /\.(less)$/;//添加主题变量所有变量const modifyVars = { "primary-color": "pi...原创 2019-02-13 10:57:01 · 1029 阅读 · 0 评论 -
styled-components中弃用injectGlobal的解决
编译错误提示: 'injectGlobal' is not exported from 'styled-components'原因: styled-components 4.x版本将原来的injectGlobal方法用createGlobalStyle替换了。用法上也有一些不同,如下import {createGlobalStyle} from 'styled-components';exp...原创 2019-02-16 15:20:17 · 3604 阅读 · 0 评论 -
React组件销毁中清理异步操作和取消请求
报错描述:Warning: 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 task...原创 2019-01-16 16:18:07 · 12742 阅读 · 1 评论 -
react中css设置作用域
react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了。下面我将简单记录并介绍一下在webpage配置实现css 的模块化。webpack的配置: 截取一小段 {test: /\.css/,use:['style-loader','css-loader?...原创 2019-01-09 15:14:35 · 5730 阅读 · 0 评论