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> ); } }
这样以后,在地址栏输入对应的链接,就会显示对应的内容。