react-antd 解决tab切换在地址栏输入对应的链接出现导航与内容对应不上的问题

import React from react;
import { Tabs } from antd;
import PropTypes from prop-types;
import Outline from ./monitor-outline;
import Host from ./host-manage;
import Process from ./process-manage;
import Disk from ./disk-manage;
import Set from ./setting-manage;
import { queryTo } from ../../utils/history;
import { roleActions } from ../../store/actions;

const { TabPane } = Tabs;

const initArr = [outline, host, process, disk, setting];

export default class MonitorPage extends React.Component {
  static propTypes = {
    location: PropTypes.object.isRequired,
  };

  state = {
    tabArr: [],
    contentType: ‘‘,
  };

  componentDidMount() {
    const { location: { query } } = this.props;
    if (query.tabKey && initArr.indexOf(query.tabKey) === -1) {
      window.location.href = /notFound;
      return;
    }
    this.fetchSubTab(63);
  }

  async fetchSubTab(id) {
    this.dataLoading = roleActions.fetchSubTab(id);
    const data = await this.dataLoading;
    let arr = data.data.map(d => d.perm);
    const { location: { query } } = this.props;
    if (query.tabKey && arr.indexOf(query.tabKey) === -1) {
      window.location.href = /notPower;
      return;
    }
    this.setState({
      tabArr: arr,
    });
    if (arr.indexOf(query.tabKey) > -1) {
      this.setState({
        contentType: query.tabKey,
      });
    } else {
      this.setState({
        contentType: arr[0],
      });
    }
  }

  tabChange = (e) => {
    this.setState({
      contentType: e,
    });
    queryTo({ tabKey: e });
  };

  render() {
    const { contentType, tabArr } = this.state;
    return (
      <div style={{ paddingTop: 12 }}>
        {
          tabArr.length > 0 && <Tabs defaultActiveKey={contentType} onChange={this.tabChange}>
            {
              tabArr.indexOf(outline) > -1 && <TabPane tab="监控概要" key="outline">
                <Outline />
              </TabPane>
            }
            {
              tabArr.indexOf(host) > -1 && <TabPane tab="主机管理" key="host">
                <Host />
              </TabPane>
            }
            {
              tabArr.indexOf(process) > -1 && <TabPane tab="进程管理" key="process">
                <Process />
              </TabPane>
            }
            {
              tabArr.indexOf(disk) > -1 && <TabPane tab="磁盘管理" key="disk">
                <Disk />
              </TabPane>
            }
            {
              tabArr.indexOf(setting) > -1 && <TabPane tab="参数设置" key="setting">
                <Set />
              </TabPane>
            }
          </Tabs>
        }
      </div>
    );
  }
}

将defaultActiveKey改为activeKey !!!

import React from react;
import { Tabs } from antd;
import PropTypes from prop-types;
import Outline from ./monitor-outline;
import Host from ./host-manage;
import Process from ./process-manage;
import Disk from ./disk-manage;
import Set from ./setting-manage;
import { queryTo } from ../../utils/history;
import { roleActions } from ../../store/actions;

const { TabPane } = Tabs;

const initArr = [outline, host, process, disk, setting];

export default class MonitorPage extends React.Component {
  static propTypes = {
    location: PropTypes.object.isRequired,
  };

  state = {
    tabArr: [],
    activeKey: ‘‘,
  };

  componentDidMount() {
    const { location: { query } } = this.props;
    if (query.tabKey && initArr.indexOf(query.tabKey) === -1) {
      window.location.href = /notFound;
      return;
    }
    this.fetchSubTab(63);
  }

  async fetchSubTab(id) {
    this.dataLoading = roleActions.fetchSubTab(id);
    const data = await this.dataLoading;
    let arr = data.data.map(d => d.perm);
    const { location: { query } } = this.props;
    if (query.tabKey && arr.indexOf(query.tabKey) === -1) {
      window.location.href = /notPower;
      return;
    }
    this.setState({
      tabArr: arr,
    });
    if (arr.indexOf(query.tabKey) > -1) {
      this.setState({
        activeKey: query.tabKey
      });
    } else {
      this.setState({
        activeKey: arr[0]
      });
    }
  }

  tabChange = (e) => {
    this.setState({
      activeKey: e
    });
    queryTo({ tabKey: e });
  };

  render() {
    const { tabArr, activeKey } = this.state;
    return (
      <div style={{ paddingTop: 12 }}>
        {
          tabArr.length > 0 && <Tabs activeKey={activeKey} onChange={this.tabChange}>
            {
              tabArr.indexOf(outline) > -1 && <TabPane tab="监控概要" key="outline">
                <Outline />
              </TabPane>
            }
            {
              tabArr.indexOf(host) > -1 && <TabPane tab="主机管理" key="host">
                <Host />
              </TabPane>
            }
            {
              tabArr.indexOf(process) > -1 && <TabPane tab="进程管理" key="process">
                <Process />
              </TabPane>
            }
            {
              tabArr.indexOf(disk) > -1 && <TabPane tab="磁盘管理" key="disk">
                <Disk />
              </TabPane>
            }
            {
              tabArr.indexOf(setting) > -1 && <TabPane tab="参数设置" key="setting">
                <Set />
              </TabPane>
            }
          </Tabs>
        }
      </div>
    );
  }
}

这样以后,在地址栏输入对应的链接,就会显示对应的内容。

react-antd 解决tab切换在地址栏输入对应的链接出现导航与内容对应不上的问题

上一篇:Super MB Pro M6, any better than MB sdconnect C4 Plus DoIP / C4 / C6?


下一篇:文件夹满了,查不到大文件是DELETE?