React 组件封装之 Title 标题

一、Title 标题组件

组件说明：
实现两种 Title 标题，一种有主题填充色，没有返回图标，适用于一级页面的标题；一种没有主题填充色，有返回图标，适用于非一级页面的标题。

效果展示：
有主题填充色，一级页面标题效果

无主题填充色，非一级页面标题效果

二、使用案例

import {Title} from 'share';
import React from 'react';
export default class Example extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
      return  <Title isHome={true} title="商品发布"/>
    }
}

三、API 使用指南

属性	说明	类型	默认值
title	标题文字	String	无
isHome	是否是一级页面	Boolean	false
onLeftClick	返回图标点击事件	点击返回图标的回调函数	(e: Object): void
style	样式类名	string	无

四、源代码

index.js

import React from 'react';
import './index.css';
import backBlock from '../images/title/back-block.png';
import {defaultProps} from './defaultProps';
export default class Title extends React.Component {
    static defaultProps = defaultProps;
    constructor(props) {
        super(props);
    }
    onLeftClick() {
        const {onLeftClick} =this.props;
        if (onLeftClick) {
            onLeftClick();
        }else {
            this.props.that.props.history.goBack()
        }
    }
    render() {
        const {title,prefixCls,isHome,style} =this.props;
        if (isHome) {
            return (
                <div className={prefixCls}>
                    <div className={prefixCls+"-warp-home"}>{title}</div>
                </div>
            )
        } else {
            return (
                <div className={prefixCls}>
                    <div className={prefixCls+"-warp"} style={style}>
                            <img src={backBlock} alt="" className={prefixCls+"-left-icon"} onClick={() => this.onLeftClick()}/>
                            <span>{title}</span>
                            <div className={prefixCls+"-right"}></div>
                    </div>
                </div>
            )
        }
    }
}

index.less

@import '../default';
@prefixCls: s-title;
.@{prefixCls} {
  height:@size-40;
  .@{prefixCls}-warp-home {
    position: fixed;
    background: @bc-main;
    color: @bc-white;
    left: 0;
    right: 0;
    height:@size-40;
    line-height:@size-40;
    text-align: center;
    font-size: @size-16;
    font-weight: bold;
    z-index: 999;
  }
  .@{prefixCls}-left-icon,.@{prefixCls}-right{
    width:@size-20;
  }
  .@{prefixCls}-warp {
    display: flex;
    background: #f5f5f9;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    height:@size-40;
    line-height:@size-40;
    padding: 0 (@size-10)-1;
    font-size: @size-16;
    z-index: 999;
    color: #333;
  }
}

defaultProps.js

function noop() {}
export const defaultProps = {
    prefixCls: 's-title',
    title:'',
    isHome:false,
    onLeftClick:noop,
};