在react项目中实现按钮权限createContext && useContext

简介: 文章介绍了在React项目中如何使用`createContext`和`useContext`来实现按钮级别的权限控制。

在react项目中实现按钮权限

首先,这里是使用Context来实现的,我们知道Context可以实现值传递给子孙组件,我们可以利用这个特性来实现,当然实现按钮权限级别的方法是有很多的,我这里只是在自己小项目中使用到了,所以简单总结一下,方便之后使用或者分享给大家。

1、createContext && useContext的基本使用

使用Context我们可以实现父组件向孙组件传递参数的问题,无论是属性还是callback。
也可以配合上面的useRecuder来实现孙组件更新父组件中state中的状态,只要孙组件拿到父组件中的dispatch就可以出发action,使父组件重新render。

首先我们可以选择再一个单独的js中创建一个Context

export const myName='六卿'
export const myCreateContext= React.createContext();

在父组件中引入这个js,使用解构赋值的形式拿到myName、myCreateContext:

import {
   myName,myCreateContext} from './xxx.js'

在render中使用:

<myCreateContext.Provider value={
   myName}>
      <子组件 />
</myCreateContext.Provider>

这个时候我们成功的将myName传入后代组件,无论是子组件还是孙组件;
在子组件或者孙组件中同样也引入xxx.js
在子组件或者孙组件中使用useContext这个hook来接收来自父组件中的数据;

const myName= useContext(myCreateContext);

这个时候我们就可以直接使用myName的值了。

2、使用Context实现功能

2.1、新建一个js,用来存新建的context和对应的按钮权限方法

import React, {
    useContext } from 'react'
export const myCreateContext = React.createContext()

// btnList 为 按钮权限字符串
export const isShowBtnFun = str => {
   
    if (!str) return false
    // 这里的btnList是当前登录用户,获取到用户信息中按钮权限的list,每一项为一个权限按钮的标识,这个和后端协商好就行 他可以是 数字 字符串
    const arr = (myCreateContext && useContext(myCreateContext) && useContext(myCreateContext).btnList) || []
    return arr.includes(str)
}

2.2、在app.js中引用使用一下

import {
    myCreateContext } from '@/components/context'

const [userInfoObj, setUserInfoObj] = useState({
   })


<myCreateContext.Provider value={
   userInfoObj}>
    《子组件...</myCreateContext.Provider>

setUserInfoObj在从登录页面过来之后,就可以将整个信息赋值到setUserInfoObj,我这里需要的结构为:

userInfoObj = {
   
    ...其他信息,
    btnList:[]
}

2.3、在任意子组件中使用

我这里呢,封装了一下table组件,在有时候table是需要下载表格数据的,但是有的需要控制部分角色只能看不能导出,所以,设置了一个flag,来控制是否显示下载的按钮图标,这个时候可以使用到上述isShowBtnFun方法,判断是否显示下载按钮。

import {
    isShowBtnFun } from '@/components/context'

<TableLiuQing
    Props={
   {
   
        downBoolean: isShowBtnFun('/AAADownLoad'),
        exportFun,
        title: 'AAA列表',
    }}
/>

好了,就是这么个流程,只要就是使用了context,有其他方法比如使用本地缓存、状态管理、或者创建一个全局的对象等等都可以,就这样。

目录
相关文章
|
2月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
121 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
2月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
184 1
|
7天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
2月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
51 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
2月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
97 1
react项目配合diff实现文件对比差异功能
|
2月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
60 1
React项目input输入框输入自动失去焦点
|
2月前
|
JavaScript 前端开发 应用服务中间件
本地运行打包好的React、Vue项目
本文讨论了如何本地运行打包好的React和Vue项目,并解决了使用React-Router时Tomcat部署刷新页面导致404的问题,提出了将请求转回index.html的解决方案。
25 1
本地运行打包好的React、Vue项目
|
30天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
111 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
3月前
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
340 3
使用vite搭建一个React项目!真香!