學習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;