共计 2962 个字符,预计需要花费 8 分钟才能阅读完成。
导读 | 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享 React 高阶组件使用小结,一起看看吧 |
高阶组件是以组件作为参数,返回一个组件的函数。返回的组件把传进去的组件进行功能强化。通过以下示例进一步理解高阶组件。
思路
实现
注入权限列表
抽离 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 (// 此处返回了注入权限列表 Context 的组件)
}
}
export default PermissionIndex
向根组件注入权限
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(
,
document.getElementById('root')
);
含有权限拦截功能的 HOC
无权限时显示的组件
import React from 'react'
function NoPermission() {
return (对不起,请与管理员获取权限)
}
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 ? :
}
}
}
export default PermissionHoc
测试
用于测试的组件
/*
* 资源路径 ./src/components/PermissionTest/PermissionTest.js
*/
import React from 'react'
function PermissionTest(props) {
return (PermissionTest - {props?.name}
)
}
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 ()}
此处,通过用 PermissionHOC 函数处理原始组件,进行了权限拦截功能
到此这篇关于 React 使用高阶组件与 Hooks 实现权限拦截教程详细分析的文章就介绍到这了
正文完
星哥说事-微信公众号
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)