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

[ohohohh]

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

[shakukansp]

有还叫 react ？

[Huelse]

应该有类似实现的组件库

[NessajCN]

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

[TWorldIsNButThis]

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

[sjhhjx0122]

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

[Envov]

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

[sarices]

// 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]

<AuthGuard ensure="add"><Button /></AuthGuard>

[daliusu]

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

[ohohohh]

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

[ragnaroks]

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]

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

[AyaseEri]

export const IF = (props) => props.if && props.children

[296727]

https://github.com/peakchen90/babel-plugin-react-directives, 这个有

[Chad0000]

@daliusu #8
Angular 就可以这样写，也不会有生命周期问题。

[xiaojun1994]

const Button = withAuth(RawAutton)

[DICK23]

用高阶组件包装一层