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

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

import React, { PureComponent } from 'react'

export default class Arrange extends PureComponent {
  render () {
    const {
      marginLeft = 0,
      middle = 12,
      marginRight = 0,
      marginTop = 0,
      marginBottom = 12,
      align = 'horizontal',
      children = [],
      style = {},
    } = this.props

    return (
      <div
        className="pk-arrange"
        style={{
          marginLeft,
          marginRight,
          marginTop,
          marginBottom,
          ...style,
        }}
      >
        {
          [].concat(children).filter(child => child !== null && child !== undefined).map((child, index) => {
            if (React.isValidElement(child)) {
              return (
                <div
                  className="pk-arrange-item"
                  key={child.key ? child.key : `pk-arrange-item-${index}`}
                  style={{
                    marginLeft: align === 'horizontal' && index ? middle : 0,
                    marginRight: 0,
                    marginTop: align === 'vertical' && index ? middle : 0,
                    marginBottom: 0,
                    display: 'inline-block',
                  }}
                >
                  {child}
                </div>
              )
            }

            return null
          })
        }
      </div>
    )
  }
}