React-component-library--Button

最新推荐文章于 2025-07-29 21:29:19 发布

李想同学-username

最新推荐文章于 2025-07-29 21:29:19 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

分类专栏： react-component-library 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45269534/article/details/131387393

react-component-library 专栏收录该内容

26 篇文章

订阅专栏

文章展示了如何在React中封装一个Button组件，包括不同类型的按钮、尺寸、禁用状态、圆角、虚线边框及加载状态等特性，并提供了详细的接口定义和使用示例。此外，还提到了GitHub上的组件库地址。

Button 按钮

使用以及文档如图：

封装代码如下所示

import React, {useMemo, FC, memo} from 'react';
import './index.module.less';

interface ButtonProps {
  //自定义button接口
  /**
   * @description 按钮主题
   * @default primary
   */
  type?: String;
  /**
   * @description 宽度
   */
  width?: Number;
  /**
   * @description 高度
   */
  height?: Number;
  /**
   * @description 禁用状态
   * @default false
   */
  disabled?: Boolean;
  /**
   * @description 字体按钮
   * @default false
   */
  circle?: Boolean;
  /**
   * @description 按钮边框为虚线
   * @default false
   */
  dashed?: Boolean;
  /**
   * @description 加载状态
   * @default false
   */
  loading?: Boolean;
  /**
   * @description 按钮点击回调事件
   */
  onClick?: Function | undefined;
}

interface ButtonStyle {
  //button样式接口
  width?: String;
  height?: String;
  borderRadius?: String;
  border?: String;
  cursor?: String;
}

type NativeButtonProps = Omit<React.ButtonHTMLAttributes<HTMLElement>, 'type'>; //原生button接口

const Button: FC<ButtonProps & NativeButtonProps> = memo((props) => {
  const {type, width, height, disabled, circle, dashed, loading, onClick, children} = props;

  const buttonStyle = useMemo(() => {
    if (!type && type !== 'danger' && type !== 'warning' && type !== 'warning' && type !== 'text') {
      return 'primary';
    }
    return type as any;
  }, [type]);
  const buttonSize = useMemo(() => {
    var size: ButtonStyle = {
      width: '100px',
      height: '40px',
    };
    if (width) {
      size.width = width + 'px';
    }
    if (height) {
      size.height = height + 'px';
    }
    if (circle) {
      size = {...size, borderRadius: '50%'};
    }
    if (dashed && type === 'text') {
      size = {...size, border: '1px dashed #ccc'};
    }
    if (disabled) {
      size = {...size, cursor: 'not-allowed'};
    }
    return size;
  }, [width, height, circle, dashed]);
  return (
    <div className="button">
      <button
        className={buttonStyle}
        style={buttonSize as any}
        disabled={disabled ? true : false}
        onClick={onClick as undefined}
      >
        {loading && <div className="loading1"/>}
        {children}
      </button>
    </div>
  );
});

export default Button;

GitHub-address：GitHub - username-boy/react-component-library-view: this is a react-component-library .this is a react-component-library . Contribute to username-boy/react-component-library-view development by creating an account on GitHub.https://github.com/username-boy/react-component-library-view/