组件源码——按钮Button

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
复制代码