react 能否像 vue 自定义指令控制按钮权限

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 746 天前的主题，其中的信息可能已经有所发展或是发生改变。

以前学习 vue 权限控制的时候，是在按钮组件加上指令判断例如：
<Button v-has="add" /> 这样按钮如果没有 add 权限就隐藏。
请问下 react 是否有这样自定义指令的权限？我看大部分都是在按钮上封装一个组件判断控制的，先看看有没有更加简单的方法

权限

按钮

React

Vue

17 条回复 • 2022-11-17 10:16:06 +08:00

shakukansp

2022-11-16 10:25:27 +08:00

有还叫 react ？

Huelse

2022-11-16 10:45:33 +08:00

应该有类似实现的组件库

NessajCN

2022-11-16 11:09:09 +08:00

{ v-has==="add" && (<Button />) }

TWorldIsNButThis

2022-11-16 11:23:25 +08:00 via iPhone

写个权限的 hoc 然后 wrap 需要权限的组件

sjhhjx0122

2022-11-16 11:27:56 +08:00

写个权限组件包一下要权限的内容，写个 hook 用 ref 控制一下 dom ？真想要 react 写法又想要指令去用 solidjs 吧

Envov

2022-11-16 11:33:57 +08:00

用 AuthProvider 封装 hooks 控制,api 类似这样
const {hasAuth,HasNoPermissions}=useAuth("add")
if(!hasAuth}{
return <HasNoPermissions/>
}

sarices

2022-11-16 11:33:59 +08:00

// AuthBtn
import React, { useState, useEffect, useRef } from 'react';
import { Button } from 'antd';

const AuthBtn: React.FC<{}> = (props) => {
let { authId, children } = props;
// btnIds 应该有后台接口返回，告诉前端用户有哪些按钮权限
let btnIds = ['read', 'edit'];
let hasAuth = btnIds.includes(authId);
// 这里可以根据实际需求封装
return <Button disabled={!hasAuth}>{children}</Button>;
};
export default AuthBtn;

// index.ts
<AuthBtn authId="read">read 只读权限</AuthBtn>
<AuthBtn authId="write">write 写入权限</AuthBtn>

作者：胖达 n
链接： https://juejin.cn/post/6959834563895902245
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

otakustay

2022-11-16 12:46:39 +08:00

daliusu

2022-11-16 14:05:38 +08:00

首先 vue 通过自定义指令去控制权限是百分之百会有问题的，自定义指令只能操作 dom 不能模拟出生命周期，根本无法做到完美的权限管控（组件依旧在走生命周期和各种 watch computed ）复杂代码在这种状态下一定会出和预期不一致问题。其次 react 很多人说到了用高阶组件，但是如果满屏幕各种组件都是额外包了一层就为个权限真的合适？这个东西最完美的做法是自己写 babel 插件去扩展，让 babel 去套一层走类似高级组件的功能，不但能实现真正完美的自定义指令管控权限，还可以实现 v-if. v-show v-for

ohohohh

2022-11-16 14:10:51 +08:00

@sarices #7 我现在用的就是这种，感谢

ragnaroks

2022-11-16 14:31:01 +08:00

type ButtonProps = {visable:boolean,children:ReactElement|ReactElement[]|string};
const Button = function(props:ButtonProps) : ReactElement {
if(!props.visable){return <i />;}
return <button>{props.children}</button>;
};

<div className="page">
<Button visable={user.hasAddGrant}>Click</Button>
</div>

ragnaroks

2022-11-16 14:32:48 +08:00

react 非常自由，vue 的“指令”可以上面多人提到的 hooks 、props 来实现。如果是打算系统学习 react 的话，最好先丢掉 vue 的那一套思想，用 ui = f(x) 方式思考。