antd源碼解讀（4）- ButtonGroup

ButtonGroup

這個組件沒有重點能夠說，畢竟就只是一個將Button組件包裹起來的一個容器，可是這裏仍是有一個點能夠值得一提

// 這裏的React.SFC是 typescript 的對於 react 的StatelessComponent的一個interface的一個別稱
  // 那麼對於Stateless Functional Component，是一種不須要管理state的組件，也就是說這個組件中不會
  // 對state進行操做的組件，是一個純函數組件，你們有興趣能夠去了解
  // 詳情請看 https://medium.com/@iktakahiro/react-stateless-functional-component-with-typescript-ce5043466011
  const ButtonGroup: React.SFC<ButtonGroupProps> = (props) => {}複製代碼

import React from 'react';
  import classNames from 'classnames';

  export type ButtonSize = 'small' | 'large';

  export interface ButtonGroupProps {
    size?: ButtonSize;
    style?: React.CSSProperties;
    className?: string;
    prefixCls?: string;
  }

  const ButtonGroup: React.SFC<ButtonGroupProps> = (props) => {
    const { prefixCls = 'ant-btn-group', size = '', className, ...others } = props;

    // large => lg
    // small => sm
    let sizeCls = '';
    switch (size) {
      case 'large':
        sizeCls = 'lg';
        break;
      case 'small':
        sizeCls = 'sm';
      default:
        break;
    }

    const classes = classNames(prefixCls, {
      [`${prefixCls}-${sizeCls}`]: sizeCls,
    }, className);

    return <div {...others} className={classes} />; }; export default ButtonGroup;複製代碼