jc-biz-components/components/exception/index.js

jc component library based on Antd

import React, { createElement } from 'react'
import classNames from 'classnames'
import { Button } from 'antd'
import config from './typeConfig'
// import styles from './index.less'

export default function Exception({ className, linkElement = 'a', type, title, desc, img, actions, prefixCls = 'jc-exception', ...rest }) {
  const pageType = type in config ? type : '404'
  const clsString = classNames(prefixCls, className)
  return (
    <div
      className={clsString}
      {...rest}
    >
      <div className={`${prefixCls}-img-block`}>
        <div
          className={`${prefixCls}-img`}
          style={{ backgroundImage: `url(${img || config[pageType].img})` }}
        />
      </div>
      <div className={`${prefixCls}-content`}>
        <h1>{title || config[pageType].title}</h1>
        <div className={`${prefixCls}-desc`}>{desc || config[pageType].desc}</div>
        <div className={`${prefixCls}-actions`}>
          {
            actions ||
              createElement(linkElement, {
                to: '/',
                href: '/',
              }, <Button type='primary'>返回首页</Button>)
          }
        </div>
      </div>
    </div>
  )
}