使用dva+umi+antd构建页面（三）

使用dva+umi+antd构建页面（三）

布局做好以后就可以开始构建整个系统路由及其对应的路由组件，但是有时候我们的需求是要求路由的页面在Tabs标签页中的，然后点击各个标签页可以进行切换，接下来就来探讨一下这种布局的实现。

Tabs组件

• 添加Tabs组件，在src/components/layout中添加Tabs.js组件，首先在官网https://ant.design/components/tabs-cn/复制一个Tabs组件如下：

  import React from 'react'
  import {
        Tabs, Button } from 'antd';
  
  const TabPane = Tabs.TabPane;
  
  class Mytab extends React.Component {
       
    constructor(props) {
       
      super(props);
      this.newTabIndex = 0;
      const panes = [
        {
        title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
        {
        title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' },
      ];
      this.state = {
       
        activeKey: panes[0].key,
        panes,
      };
    }
  
    onChange = (activeKey) => {
       
      this.setState({
        activeKey });
    }
  
    onEdit = (targetKey, action) => {
       
      this[action](targetKey);
    }
  
    add = () => {
       
      const panes = this.state.panes;
      const activeKey = `newTab${
         this.newTabIndex++}`;
      panes.push({
        title: 'New Tab', content: 'New Tab Pane', key: activeKey });
      this.setState({
        panes, activeKey });
    }
  
    remove = (targetKey) => {
       
      let activeKey = this.state.activeKey;
      let lastIndex;
      this.state.panes.forEach((pane, i) => {
       
        if (pane.key === targetKey) {
       
          lastIndex = i - 1;
        }
      });
      const panes = this.state.panes.filter(pane => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
       
        if (lastIndex >= 0) {
       
          activeKey = panes[lastIndex].key;
        } else {
       
          activeKey = panes[0].key;
        }
      }
      this.setState({
        panes, activeKey });
    }
  
    render() {
       
      return (
        <div>
          <div style={
       {
        marginBottom: 16 }}>
            <Button onClick={
       this