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

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

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Divider } from '../..'

import './index.scss'

export default class GroupInfo extends PureComponent {
  static propTypes = {
    dataSrc: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
      title: PropTypes.string,
      detail: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
      ]),
    })).isRequired).isRequired,
  }

  render () {
    const { dataSrc } = this.props
    const dataLen = dataSrc.length
    return (<div className="pk-group-info">
      {dataSrc.map((group, gIndex) => {
        return (<div className="pk-group-info__group" key={`${group.title}-${gIndex}`}>
          <div className="pk-group-info__content">
            {group.map((groupItem, itemIndex) => {
              return (<div className="pk-group-info__item" key={`${group.title}-${gIndex}-${itemIndex}`}>
                <dt className="pk-group-info__title">{groupItem.title}</dt>
                <dl className="pk-group-info__detail">{groupItem.detail}</dl>
              </div>)
            })}
          </div>
          <div className="pk-group-info__divider">
            {gIndex + 1 !== dataLen ? <Divider type="vertical" /> : ''}
          </div>
        </div>)
      })}
    </div>)
  }
}