使用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.add}>ADD</Button>
        </div>
        <Tabs
          hideAdd
          onChange={this.onChange}
          activeKey={this.state.activeKey}
          type="editable-card"
          onEdit={this.onEdit}
        >
          {this.state.panes.map(pane => <TabPane tab={pane.title} key={pane.key}>{pane.content}</TabPane>)}
        </Tabs>
      </div>
    );
  }
}
export default Mytab

然后将其替换src/layouts/index.js中的Content

rander函数如下：

return (
      <Layout>
        <MySider collapsed={collapsed}>
          <MyMenu {...menuProps}/>
        </MySider>
        <Layout>
          <Header collapsed={collapsed} onCollapseChange={onCollapseChange}/>
          <MyTab>
            {this.props.children}
          </MyTab>
        </Layout>
      </Layout>
    );

此时可以看到页面有了tab组件，并可以正常添加删除

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

状态提升

接下来需要将tab组件状态提升，由dva管理，那就先改造tab组件

import React from 'react'
import {Tabs,Button} from 'antd';
import PropTypes from "prop-types";

const TabPane = Tabs.TabPane;

class MyTab extends React.Component {

  onEdit = (targetKey, action) => {
    this[action](targetKey);
  }

  remove = (targetKey) => {
    const {onPaneRemove} = this.props
    onPaneRemove(targetKey)
  }

  render() {
    const {
      panes,
      activeKey,
      onPaneChange,
      onPaneAdd,
    } = this.props
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <Button onClick={onPaneAdd}>ADD</Button>
        </div>
        <Tabs
          hideAdd
          onChange={onPaneChange.bind(this)}
          activeKey={activeKey}
          type="editable-card"
          onEdit={this.onEdit}
        >
          {panes.map(pane => <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
            {pane.content}
          </TabPane>)}
        </Tabs>
      </div>
    );
  }
}

MyTab.propTypes = {
  panes: PropTypes.array.isRequired,
  activeKey: PropTypes.string.isRequired,
  onPaneChange: PropTypes.func.isRequired,
}
export default MyTab

然后修改src/layouts/index.js

import React from 'react'
import {Layout} from 'antd';
import Header from '../components/layout/Header'
import MySider from '../components/layout/Sider'
import MyMenu from '../components/layout/Menu'
import MyTab from '../components/layout/Tabs'

import {connect} from 'dva';

class BasicLayout extends React.Component {
  onCollapseChange = collapsed => {
    this.props.dispatch({
      type: 'app/handleCollapseChange',
      payload: {collapsed},
    })
  }

  handelMenuClick = (element) => {
    //路由到相关页面
    this.props.history.push(element.item.props.url)
  }

  onPaneAdd = () => {
    //todo something
  }

  onPaneChange = () => {
    //todo something
  }

  onPaneRemove = () => {
    //todo something
  }

  render() {
    const {app, children} = this.props
    const {menus, theme, collapsed,panes,activeKey,} = app
    const {handelMenuClick, onCollapseChange,onPaneAdd,onPaneChange,onPaneRemove} = this
    const menuProps = {
      theme,
      menus,
      children,
      handelMenuClick,
      onCollapseChange,
    }
    const tapProps = {
      panes,
      children,
      activeKey,
      onPaneAdd,
      onPaneChange,
      onPaneRemove,
    }

    return (
      <Layout>
        <MySider collapsed={collapsed}>
          <MyMenu {...menuProps}/>
        </MySider>
        <Layout>
          <Header collapsed={collapsed} onCollapseChange={onCollapseChange}/>
          <MyTab {...tapProps}>
            {this.props.children}
          </MyTab>
        </Layout>
      </Layout>
    );
  }
}

export default connect((({app}) => ({app})))(BasicLayout)

然后修改src/models/app.js

export default {
  namespace: 'app',
  state: {
    collapsed: false,
    activeKey: '1',
    panes: [
      {title: `dashboard`, content: '', key: '1', closable: false, url: '/dashboard'},
    ],
    theme: 'dark',
    menus: [{
      id: '1',
      name: 'dashboard',
      icon: 'dashboard',
      url: '/dashboard',
    }, {
      id: '2',
      name: '用户管理',
      icon: 'user',
      url: '1',
      children: [{
        id: '3',
        name: '用户管理',
        icon: 'user',
        url: '/user',
      },]
    }, {
      id: '3',
      name: '用户管理',
      icon: 'user',
      url: '1',
      children: [{
        id: '4',
        name: '用户管理',
        icon: 'user',
        url: '/user',
      },]
    }],
  },
  subscriptions: {},
  effects: {},
  reducers: {
    updateState(state, {payload}) {
      return {
        ...state,
        ...payload,
      }
    },
    handleCollapseChange(state, {payload}) {
      return {
        ...state,
        ...payload,
      }
    },
  },
}

最后完成src/layouts/index.js中几个控制状态的函数

onPaneAdd = () => {
    const {app, dispatch} = this.props
    const {panes,} = app
    let newPane = {title: 'new Tab', content: '', key: panes.length + '1',}
    let flag = false
    let newPanes = panes.map(item => {
      if (newPane.key === item.key) {
        flag = true
        return {...item, ...newPane}
      }
      return item
    })
    dispatch({
      type: 'app/updateState',
      payload: {
        panes: flag ? newPanes : [...newPanes, newPane],
        activeKey: newPane.key,
      },
    })
  }

  onPaneChange = targetKey => {
    const {dispatch,} = this.props
    dispatch({
      type: 'app/updateState',
      payload: {
        activeKey: targetKey
      },
    })
  }

  onPaneRemove = targetKey => {
    const {dispatch,} = this.props
    const payload = this._removeTap(targetKey)
    dispatch({
      type: 'app/updateState',
      payload: payload,
    })
  }

  _removeTap = (targetKey) => {
    const {panes, activeKey} = this.props.app
    let newActiveKey = activeKey
    let lastIndex;
    panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const newPanes = panes.filter(pane => pane.key !== targetKey);
    if (newPanes.length && activeKey === targetKey) {
      if (lastIndex >= 0) {
        newActiveKey = newPanes[lastIndex].key;
      } else {
        newActiveKey = newPanes[0].key;
      }
    }
    return {
      panes: newPanes,
      activeKey: newActiveKey
    }
  }

这样就可以添加与删除了，但是我们需要的是点击菜单添加，并且显示该页面，所以再稍微改造一下src/layouts/index.js中的函数，并且把Tab组件中的添加按钮删掉

index.js

//菜单点击事件
handelMenuClick = element => {
    let newPane = {title: element.item.props.name, content: '', key: element.key, url: element.item.props.url}
    this.onPaneAdd(newPane)
  }
//打开新tab
  onPaneAdd = (newPane) => {
    const {app, dispatch, history,} = this.props
    const {panes,} = app
    let flag = false
    //路由到相关页面
    history.push(newPane.url)
    setTimeout(()=>{
      newPane.content = this.props.children
      let newPanes = panes.map(item => {
        if (newPane.key === item.key) {
          flag = true
          return {...item, ...newPane}
        }
        return item
      })
      dispatch({
        type: 'app/updateState',
        payload: {
          panes: flag ? newPanes : [...newPanes, newPane],
          activeKey: newPane.key,
        },
      })
    },100)
  }

Tabs.js

//初始化加载第一个tab
  componentWillMount(){
    const {panes, onPaneAdd,} = this.props
    if (panes.length === 1) {
      const pane = panes[0]
      onPaneAdd(pane)
    }
  }

这样就可以实现tab的添加与删除了：

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

参考代码：https://github.com/enusune/myapp

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

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

Tabs组件

相关推荐