react实现按钮级别的权限,封装ant/Button公共组件

1. 新建authBtn.tsx文件（这里固定使用button组件，组件可以是任何内容，通过props传过来）

import React from "react";
import { SephoraButton } from "@sephora/antd";
import { ButtonProps } from "@sephora/antd/lib/sephora-button";

export function checkBtnAuth(webKey: string, tags: string[] = []) {
  return Array.from(new Set(tags)).includes(webKey);
}

export interface IProps extends ButtonProps {
  webKey: string;
  tags: string[];
}

const AuthComponent: React.FunctionComponent<IProps> = (props) => {
  const { webKey, tags, ...others } = props;
  if (checkBtnAuth(webKey, tags)) {
    return <SephoraButton {...others} /> //component可以作为变量通过props传进来;
  }
  return null;
};

export default AuthComponent;

2. 在其他组件中使用

import AuthBtn from './authBtn.tsx'

<AuthBtn type="primary" webKey={webKey} tags={tags}>新建试验</AuthBtn>