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

2022-11-16 10:17:31 +08:00
 ohohohh
以前学习 vue 权限控制的时候,是在按钮组件加上指令判断例如:
<Button v-has="add" /> 这样按钮如果没有 add 权限就隐藏。
请问下 react 是否有这样自定义指令的权限?我看大部分都是在按钮上封装一个组件判断控制的,先看看有没有更加简单的方法
3185 次点击
所在节点    React
17 条回复
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
写个权限的 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
<AuthGuard ensure="add"><Button /></AuthGuard>
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) 方式思考。
AyaseEri
2022-11-16 14:33:29 +08:00
export const IF = (props) => props.if && props.children
296727
2022-11-16 15:34:50 +08:00
Chad0000
2022-11-16 15:37:57 +08:00
@daliusu #8
Angular 就可以这样写,也不会有生命周期问题。
xiaojun1994
2022-11-16 18:40:52 +08:00
const Button = withAuth(RawAutton)
DICK23
2022-11-17 10:16:06 +08:00
用高阶组件包装一层

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/895606

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX