标签：right console nextProps demo 案列 react 组件 import ReactNode

学习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;

标签：right,console,nextProps,demo,案列,react,组件,import,ReactNode
来源： https://www.cnblogs.com/study-together/p/16329497.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。