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;複製程式碼