关于在页头写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><PageHeaderLayoutcontent={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 (<PageHeaderLayoutcontent={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>);}
}

关于在页头写Tabs的两种写法相关推荐

写if-else不外乎两种场景：异常逻辑处理和不同状态处理。
写if-else不外乎两种场景:异常逻辑处理和不同状态处理. 参考文章: (1)写if-else不外乎两种场景:异常逻辑处理和不同状态处理. (2)https://www.cnblogs.com/hu ...
使用IJ写scala的两种方式
使用ij写scala有两种方法, 1,使用maven来管理创建maven项目后把java相关的路径删除,然后将java相关的路径都删除在project structure将scala对应版本导入 ...
两种写法的效果一样，那么到底哪一种更好呢？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 有时候,我们在写一些循环逻辑的时候,并不是按执行次数等作 ...
android 闪屏页处理_Android应用闪屏页延迟跳转的三种写法
闪屏页也称之为欢迎页.在打开一个App时,我们第一眼看到的往往是一个闪屏页面,之所以叫闪屏页,是因为它出现之后会短暂地停留几秒钟再跳转到其他页面.闪屏页除了使用户体验更好外,还能给app留出初始化数据 ...
20210408:力扣(二分查找法的两种写法以及变体题目)
二分查找法的两种写法以及变体题目写在前面题目思路与算法代码实现写在最后写在前面关于二分查找,真的是一个非常实用的查找算法,主要有两种写法,今天在总结时再次碰到,再次整理,方便后续查看复习 ...
sum 去重_总结leetcode上【排列问题】【组合问题】【子集问题】回溯算法去重的两种写法！...
本周小结!(回溯算法系列三)续集在本周小结!(回溯算法系列三) 中一位录友对整颗树的本层和同一节点的本层有疑问,也让我重新思考了一下,发现这里确实有问题,所以专门写一篇来纠正,感谢录友们的积极交 ...
Vue2基础-el与data的两种写法（HTML版）
目录一.el的2种写法二.data的2种写法三. 一个重要的原则 Vue2基础全套教程合集:点击跳转 Vue2高级全套教程合集:点击跳转一.el的2种写法 new Vue时候配置 ...
【v-on】一个元素绑定多个事件以及一个事件绑定多个函数的两种写法
本文代码主要讲述了v-on绑定事件函数传参,一个元素绑定多个事件的两种写法,一个事件绑定多个函数的两种写法,修饰符的使用. <!DOCTYPE html> <html lang=&q ...
（五）Vue之data与el的两种写法
文章目录 el的两种写法 data的两种写法 Vue学习目录上一篇:(四)Vue之数据绑定下一篇:(六)Vue之MVVC 容器: <div id="root">&l ...

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

关于在页头写Tabs的两种写法相关推荐

最新文章

热门文章