导读 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React高阶组件使用小结,一起看看吧

高阶组件是以组件作为参数,返回一个组件的函数。返回的组件把传进去的组件进行功能强化。通过以下示例进一步理解高阶组件。

思路
  • 使用HOC包裹需要权限的页面或组件,并注入唯一的权限签名
  • 用Context保存全局的权限菜单列表,用Provider注入异步获取到的权限菜单
  • 在HOC中用useContext / Consumer获取权限列表,并和签名做匹配。如果有权限,则展示;没有权限,展示没有权限组件
实现
注入权限列表

抽离Context

在文件中创建一个context,并使用export暴露出对应的Provider,Consumer,Context

/*
* 资源路径 ./src/utils/PermissionContext.js
*/
import { createContext } from "react";
const PermissionContext = createContext()
export const PermissionContextProvider = PermissionContext.Provider
export const PermissionContextConsumer = PermissionContext.Consumer
export default PermissionContext

向页面注入权限列表的HOC

此处创建一个HOC,包裹了App组件,实现了向整个页面注入Permission列表

/*
* 资源路径 ./src/components/PermissionIndex/PermissionIndex.js
*/
import React, { useState, useEffect } from 'react'
import { PermissionContextProvider } from '../../utils/PermissionContext' // import对应的Context
function PermissionIndex(Component) {
return function Index(props){
const [permission, setpermission] = useState([])
useEffect(()=>{
setpermission(['edituser','checkorder'])
//此处实际为 获取权限列表的请求操作
},[])
//代替了类组件的componenetDidMount生命周期
return (
< PermissionContextProvider value={permission}>
< Component {...props}>< /Component>
< /PermissionContextProvider>
//此处返回了注入权限列表Context的组件
)
}
}
export default PermissionIndex
  • useState用于动态注入获取的权限列表
  • 组件通过Context.Provider包裹。权限列表改变,所有消费权限列表的组件重新更新

向根组件注入权限

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App'
import PermissionIndex from './components/PermissionIndex/PermissionIndex'
const IndexWithPermission = PermissionIndex(App)
ReactDOM.render(
< IndexWithPermission/>,
document.getElementById('root')
);
含有权限拦截功能的HOC

无权限时显示的组件

import React from 'react'
function NoPermission() {
return (
< div>对不起,请与管理员获取权限< /div>
)
}
export default NoPermission

权限拦截HOC组件

/*
* 资源路径 ./src/components/PermissionHOC/PermissionHOC.js
*/
import React, { useContext } from 'react'
import PermissionContext from '../../utils/PermissionContext'
import NoPermission from '../NoPermission/NoPermission'
function PermissionHoc(authorization) {
return function(Component){
return function PermissionIndex(props){
const context = useContext(PermissionContext)
//使用useContext获取当前的权限列表,相当于类组件中的contentType静态属性
return context.indexOf(authorization) >= 0 ? < Component {...props}>< /Component> : < NoPermission>< /NoPermission>
}
}
}
export default PermissionHoc
  • 此示例中使用两层包装函数的HOC,第一层用于获取HOC绑定的当前组件的权限签名,因为要用这个权限签名和权限列表做匹配。第二层接受原始组件。
  • 在HOC中使用 useContext 接收权限列表,做权限匹配。组件有权限则展示,没有权限则展示无权限组件。
测试

用于测试的组件

/*
* 资源路径 ./src/components/PermissionTest/PermissionTest.js
*/
import React from 'react'
function PermissionTest(props) {
return (
< div>PermissionTest - {props?.name}< /div>
)
}
export default PermissionTest

在组件中使用权限组件

/*
* 资源路径 ./src/components/App/App.js
*/
import React, { useContext, useEffect, useRef } from 'react'
import PermissionContext from '../../utils/PermissionContext'
import PermissionHoc from '../../components/PermissionHoc/PermissionHoc'
import PermissionTest from '../../components/PermissionTest/PermissionTest'
export default function App() {
const Edituser = PermissionHoc('edituser')(PermissionTest)
const Edituser1 = PermissionHoc('edituser1')(PermissionTest)
return (
< div>
< Edituser name="edituser">< /Edituser>
< Edituser1 name="edituser1">< /Edituser1>
< /div>
)
}

此处,通过用PermissionHOC函数处理原始组件,进行了权限拦截功能

到此这篇关于React使用高阶组件与Hooks实现权限拦截教程详细分析的文章就介绍到这了

https://www.linuxprobe.com/

React使用高阶组件与Hooks实现权限拦截教程的更多相关文章

  1. 【转】react的高阶组件

    React进阶之高阶组件   前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...

  2. react.js 高阶组件----很简单的实例理解高阶组件思想

    调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...

  3. react之高阶组件(二)

    高阶组件的使用 接上文———— 一.像函数一样直接调用 import React, { Component } from 'react' import A from './A' class C ext ...

  4. React 之 高阶组件的理解

    1.基本概念 高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式 组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...

  5. react用高阶组件实现路由守卫

    react-router不像vue-router一样有很多钩子函数,可以做路由守卫.想实现路由守卫,可以用高阶组件来实现. @connect(state => ({ isLogin: state ...

  6. react之高阶组件(一)

    当两个或多个组件有相同的地方,可以将相同的部分抽离出来 先创建三个组件A.B.C A.js import React, { Component } from 'react' class A exten ...

  7. React高阶组件总结

    在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件. Mixin方法例如: //给所有组件添加一个name属性 var defaultMixin = { getDefaul ...

  8. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

  9. 使用React Hooks新特性useReducer、useContext替代传统Redux高阶组件案例

    当我们使用redux进行数据管理的时候,一般都是在根组件通过Provider的方式引入store,然后在每个子组件中,通过connect的方式使用高阶组件进行连接,这样造成的一个问题是,大量的高阶组件 ...

  10. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

随机推荐

  1. CentOS安装mysql、MariaDB以及更改数据库存储路径

    注意:此方法只适用于新的机器或没有重要数据库表(可随意删除)的机器安装,如需升级版本参考下方链接!!! https://www.jianshu.com/p/955ff6065935 一.安装操作 1. ...

  2. 视觉SLAM:滑动窗口

    1.SLAM问题 1.1建模 考虑某个状态 \(\xi\),以及一次与该变量相关的观测 \(r_{i}\).由于噪声存在,观测服从概率分布 \(p(r_{i}|\xi)\).多个观测时,各个测量值相互 ...

  3. DVWA靶场实战(十四)——JavaScript

    DVWA靶场实战(十四) 五.Java Script: 1.漏洞原理: 这里的JavaScript其实是JavaScript Attack也就是JS攻击.JavaScript是一种基于对象和事件驱动的 ...

  4. RocketMQ - 生产者最佳实践总结

    相对消费者而言,生产者的使用更加简单,一般关注消息类型.消息发送方法和发送参数,即可正常使用RocketMQ发送消息 常用消息类型 消息类型 优点 缺 点 备注 普通消息(并发消息) 性能最好.单机T ...

  5. 乌卡时代的云成本管理:从0到1了解FinOps

    在上一篇文章中,我们介绍了企业云业务的成本构成以及目前面临的成本困境,以及当前企业逐步转向 FinOps 的行业趋势,这篇文章我们将详细聊聊 FinOps,包括概念.重要性以及成熟度评价指标. 随着对 ...

  6. 欢迎来到 SIXIANG 的 blog~

    很欢迎呢~ SX,海豹叉 Luogu OIer,whker,养老人

  7. honoka和格点三角形

    题目: honoka最近在研究三角形计数问题.她认为,满足以下三个条件的三角形是"好三角形".1.三角形的三个顶点均为格点,即横坐标和纵坐标均为整数.2.三角形的面积为 .3.三角 ...

  8. ArcGIS for Android 实现加载地图

    创建第一个应用 1.前期项目准备 1.1. 创建新工程 新建一个空活动项目 选择语言.平台,修改命名等 1.2. 添加ArcGIS SDK build.gradle (Project: <pro ...

  9. LeetCode-540 有序数组中单一元素

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/single-element-in-a-sorted-array 题目描述 给你一个仅由整数组成的 ...

  10. LeetCode-1034 边界着色

    题目来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/coloring-a-border/ 题目描述 给你一个大小为 m x n 的整数矩阵 gri ...