在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，有其他方法比如使用本地缓存、状态管理、或者创建一个全局的对象等等都可以，就这样。
