组件源码——按钮Button

最新推荐文章于 2021-09-21 23:38:39 发布

转载最新推荐文章于 2021-09-21 23:38:39 发布 · 566 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c0a060551882546150ace82

文章标签：

#javascript #ViewUI

本文详细介绍了Button组件的API，包括其属性如type、size、icon等的使用方法，以及组件如何通过classNames函数实现样式控制。提供了Button组件的React实现代码，帮助开发者更好地理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Button组件的API如下

属性	类型	说明
type	string	按钮类型，除默认外可选值: minor / inverse
size	string	按钮尺寸，除默认外可选值：sm、lg
icon	string	按钮图标，支持 fontawaresome 图标
circle	bool	是否为圆形
transparent	bool	文字颜色是否继承，背景是否透明

Button组件的实现比较简单，就是通过classNames函数来实现button组件类名的命名，这样css可以根据类名来控制属性,例如如果是className='bfd-btn bfd-btn--circle',css会分别对bfd-btn和bfd-btn---circle设置样式。可以说Button组件的实现是其他组件实现的一个雏形，下面附上代码

import './index.less'
import React, { PropTypes } from 'react'
import classnames from 'classnames'
import Icon from '../Icon'

const Button = props => {
  const { children, className, type, size, icon, circle, transparent, ...other } = props
  const classNames = classnames(
    'bfd-btn',
    {
      [`bfd-btn--${type}`]: type,
      [`bfd-btn--${size}`]: size,
      'bfd-btn--circle': circle,
      'bfd-btn--icon': icon && !children,
      'bfd-btn--transparent': transparent
    },
    className
  )
  return (
    <button type="button" className={classNames} { ...other }>
      {icon && <Icon type={icon} />}
      {children}
    </button>
  )
}

Button.propTypes = {
  // 按钮类型，除默认外可选值: minor / inverse
  type: PropTypes.string,
  // 按钮尺寸，除默认外可选值：sm、lg
  size: PropTypes.string,
  // 按钮图标，支持 fontawaresome 图标
  icon: PropTypes.string,
  // 是否为圆形
  circle: PropTypes.bool,
  // 文字颜色是否继承，背景是否透明
  transparent: PropTypes.bool
}
export default Button
复制代码