// 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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。