react框架class组件的demo案列

学习react项目联系了已歌header的组件的封装

import { NavBar } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import React, { ReactNode } from 'react';
import { history } from 'umi';
import './index.less';

interface IProps {
  back?: string;
  left?: ReactNode;
  children?: ReactNode;
  right?: string | ReactNode;
  rightClick?: () => void;
  backArrow?: boolean;
}

// 基础用法
class Index extends React.Component<IProps> {

  state = {
    right: this.props.right
  }

  componentDidMount() {
    console.log('组件安装')
  }

  componentWillUnmount() {
    console.log('组件将卸载')
  }

  /**
   * 监听prorps变化执行
   * @param nextProps 
   */
  componentWillReceiveProps(nextProps: IProps) {
    console.log('进来了', nextProps.right)

    this.setState({
      right: nextProps.right
    })
  }

  left = (
    <div
      style={{
        fontSize: '16px',
        color: '#4090F7',
      }}
    >
      {this.props.left}
    </div>
  );

  backArrow = (
    <div
      style={{
        fontSize: '16px',
        color: '#4090F7',
        lineHeight: '26px',
        display: 'flex',
        alignItems: 'center',
      }}
    >
      <LeftOutline fontSize={20} color={'#4090F7'} />
      {this.props.back}
    </div>
  );

  render() {
    return (
      <div className="header_con">
        <NavBar
          //back={this.props.back || ''} //返回区域的文字，如果为 null 的话，backArrow 也不会渲染
          backArrow={this.props.backArrow ? this.backArrow : false} //是否显示返回区域的箭头，也可以传入 ReactNode 进行自定义
          children={this.props.children} //标题
          left={this.props.left ? this.left : ''} //左侧内容，渲染在返回区域的右侧
          right={this.state.right ? (
            <div
              style={{
                marginRight: '16px',
                fontSize: '16px',
                color: '#4090F7',
              }}
              onClick={this.props.rightClick}
            >
              {this.state.right}
            </div>
          ) : ''} //右侧内容
          className={'navBarStyle'}
          onBack={() => {
            history.goBack(); //点击返回区域后的回调
          }}
        />
      </div>
    );
  }
}
export default Index;