ButtonGroup

There is no point in this component, after all it is just a container wrapped around a Button component, but there is one point worth mentioning here

  // React.SFC is typescript's nickname for the Interface of the React StatelessComponent
  // The Stateless Functional Component is a Component that does not need to manage state
  // The component that operates on state is a purely functional component
  For details, see https://medium.com/@iktakahiro/react-stateless-functional-component-with-typescript-ce5043466011
  const ButtonGroup: React.SFC<ButtonGroupProps> = (props) = > {}Copy the code

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

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

  exportinterface 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;Copy the code