关于在页头写Tabs的两种写法

最近有一个需求，需要将antdesign的Tab组件放在页头，而内容分离到页面内容，做成这样的效果：

想要实现这样的写法，要在页头组件PageHeaderLayout里下文章，这里总结两种写法，分别是将TabPane写在当页和分出多页写的.

第一种，放在当页的写法：

import React, {Component} from 'react';
import {connect} from 'dva';
import { routerRedux, Route, Switch } from 'dva/router';
import {Row, Col, Form, Input, DatePicker, Button, Table, Tabs, TimePicker} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import Chart from 'echarts-for-react';
import styles from './index.less';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const formItemLayout = {
  labelCol: {
    span: 5
  },
  wrapperCol: {
    span: 19
  },
};
@connect(({facilityClinic}) => ({
  facilityClinic,
}))
export default class checkEquipment extends Component {
  state = {
    operationkey: 'tab1',
  };
  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({
      type: 'facilityClinic/fetch',
      payload: {}
    });
  }
  onOperationTabChange = key => {
    this.setState({ operationkey: key });
  };

  render() {
    const { operationkey } = this.state;
    const {facilityClinic, dispatch} = this.props;

    const content = (
      <Row>
        <h2>我是页头</h2>
      </Row>
    );
    const tabList = [
      {
        key: 'tab1',
        tab: '文章',
      },
      {
        key: 'tab2',
        tab: '应用',
      }
    ];
    const contentList = {
      tab1: (
        <div>
          我是文章
        </div>
      ),
      tab2: (
        <div>
         我是应用
        </div>
      ),
    };
    return (
      <div>
        <PageHeaderLayout
          content={content}
          tabList={tabList}
          onTabChange={this.onOperationTabChange}
        >
          <Row style={{backgroundColor: 'white'}}>
            {contentList[operationkey]}
          </Row>
        </PageHeaderLayout>
      </div>
    );
  }
}

第二种，分成多页的写法

import React, { Component } from 'react';
import { routerRedux, Route, Switch } from 'dva/router';
import { connect } from 'dva';
import { Input } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { getRoutes } from '../../utils/utils';

@connect()
export default class SearchList extends Component {
  handleTabChange = key => {
    const { dispatch, match } = this.props;
    switch (key) {
      case 'articles':
        dispatch(routerRedux.push(`${match.url}/articles`));
        break;
      case 'applications':
        dispatch(routerRedux.push(`${match.url}/applications`));
        break;
      case 'projects':
        dispatch(routerRedux.push(`${match.url}/projects`));
        break;
      default:
        break;
    }
  };

  render() {
    const tabList = [
      {
        key: 'articles',
        tab: '文章',
      },
      {
        key: 'applications',
        tab: '应用',
      },
      {
        key: 'projects',
        tab: '项目',
      },
    ];

    const content = (
      <div>
        我是页头
      </div>
    );

    const { match, routerData, location } = this.props;
    const routes = getRoutes(match.path, routerData);

    return (
      <PageHeaderLayout
        content={content}
        tabList={tabList}
        tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
        onTabChange={this.handleTabChange}
      >
        <Switch>
          {routes.map(item => (
            <Route key={item.key} path={item.path} component={item.component} exact={item.exact} />
          ))}
        </Switch>
      </PageHeaderLayout>
    );
  }
}