cjd-parkball/src/components/stateTag/index.js

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

import React from 'react'
import PropTypes from 'prop-types'
import './index.scss'

export default class StateTag extends React.PureComponent {
  static Dot = ({ status }) => {
    return <span className={`pk-tag-dot pk-${status}-dot`} />
  }

  static defaultProps = {
    status: 'normal',
    dotPosition: 'left',
    onClick: () => true,
  }

  static propTypes = {
    status: PropTypes.string,
    dotPosition: PropTypes.string,
    onClick: PropTypes.func,
  }

  render () {
    const {
      children, status, dotPosition, onClick,
    } = this.props
    return (
      <span className={`pk-state-tag pk-${status}-tag`} onClick={() => onClick(this.props)}>
        {
          dotPosition === 'left' || dotPosition === 'top' ?
            <StateTag.Dot status={status} />
          : null
        }
        <span className={`pk-tag-children pk-${dotPosition}-children`}>{children}</span>
        {
          dotPosition === 'right' || dotPosition === 'bottom' ?
            <StateTag.Dot status={status} />
          : null
        }
      </span>
    )
  }
}