使用react 高阶组件withRouter
使用react 高阶组件withRouter
withRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中。这是一个非常实用的函数
react中经过路由渲染的组件才拥有路由参数,使用this.props.history.push(’/a’)跳转到对应路由的页面
一般都是使用withRouter函数调用
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'class ApiServ extends Component {render() {return (<div>API</div>)}
}export default withRouter(ApiServ)
react中有一种装饰器@的方法
create-react-app默认不支持装饰器的,需要做以下配置。
打开 package.json ,可以看到eject。运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来(运行之前要保证本地没有待提交git的代码)
"scripts": {"eject": "react-scripts eject"
}
完成之后本地会多一个config的文件夹
安装babel插件
babel >= 7.x
npm install --save-dev @babel/plugin-proposal-decorators
babel@6.x
npm install --save-dev babel-plugin-transform-decorators-legacy
修改package.json文件的babel配置项
Babel >= 7.x
"babel": {"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]],"presets": ["react-app"]}
babel@6.x
"babel": {"plugins": ["transform-decorators-legacy"],"presets": ["react-app"]
}
下面就可以使用装饰圈@了
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'@withRouter
class ApiServ extends Component {render() {return (<div>API</div>)}
}export default ApiServ
使用react 高阶组件withRouter相关推荐
- react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- 「react进阶」一文吃透React高阶组件(HOC)
一 前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
- react高阶组件和hooks
1. react高阶组件 1.1 高阶组件的概念 高阶组件(Higher Order Component,简称:HOC ): 是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组 ...
- [react] 高阶组件(HOC)有哪些优点和缺点?
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点 通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度 缺点 组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
- React高阶组件探究
React高阶组件探究 在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...
- react组件类型及深入理解react高阶组件
React中常见的组件类型及分类: 1.展示组件(Presentational component) 与 容器组件(Container component) 2.类组件(Class component ...
- React高阶组件_阶段1
react高阶组件_阶段1 作用: 个人总结的高阶组件设计的作用主要有两点, 这里直接使用装饰器方式 非装饰器使用请结合我的博文"react基础梳理_阶段1"中的"自定义 ...
- react 高阶组件hoc使用
react 高阶组件hoc使用 1. 为什么使用高阶组件 2. 具体使用 2.1原代码: 2.2 使用hoc封装后 1. 为什么使用高阶组件 高阶组件(HOC)是 React 中用于复用组件逻辑的一种 ...
- react 高阶组件
react 高阶组件 概述 目的:实现状态逻辑复用 采用 包装(装饰)模式,比如说:手机壳 手机:获取保护功能 手机壳:提供保护功能 高阶组件就相当于手机壳,通过包装组件,增强组件功能 思路分析 高阶 ...
最新文章
- R语言splines包构建基于logistic回归的自然样条分析:南非心脏病数据集、非线性:基函数展开和样条分析、你简单分析的不重要特征,可能只是线性不显著、而非线性是显著的
- 80x86描述符总结及解析描述符的小程序
- Java构建子类对象时的顺序
- [bbk4343]小布-OCP 042全真试题讲解
- c++查找pair,使用map,unordered_map,vector
- C++工程师面试题大全
- python怎么加锁_Python开发【笔记】:加锁的最佳方案
- 文成小盆友python-num6 -反射 ,常用模块
- 解决plsql使用无法导出DMP
- html5页面风格,H5页面设计风格大盘点!
- bim软件32位计算机条件,哪些bim软件能在在win732位上运行?
- 供应链业务架构设计概览
- android显示txt文件的组件,Android文本控件的介绍
- SQLServer 启动问题,服务器错误代码126 解决办法
- 一文详解 implementation api embed
- 原价游戏太贵?爬取steam游戏优惠信息
- 《信息物理融合系统(CPS)设计、建模与仿真——基于 Ptolemy II 平台》——2.8 小结...
- CSS让同一行的图片和文字垂直居中对齐
- 管理网络(网络概念)
- python 中的 re.compile 函数(转)
热门文章
- matlab图片参数设置及导出(符合论文要求)
- 图论基础知识(四) —— 有向图
- matlab实现srt,SRT计划项目申请书提交版.doc
- 正式开源 无恒实验室推出 appshark 自动化漏洞及隐私合规检测工具
- 千元内哪款蓝牙耳机适合运动用?续航时间长的四款蓝牙耳机测评
- 下面不属于python保留字_下面不属于 Python 保留字的是【 】。_学小易找答案
- 软考A计划-电子商务设计师-电子商务系统开发知识
- java excel 展开折叠_Java在Excel中创建多级分组、折叠或展开分组的实现
- iOS 苹果应用商店审核指南
- Student s1 = new Student();这个过程发生了什么