【实例简从容的八宝粥【实例截图】【核心代码】import React from 'react'import { Layout, Menu,Tabs } from 'antd';import { BrowserRouter as Router,Route,Link} from 'react-router-dom'import './css/layout.css'import Option1 from './components/option1'import Option2 from './components/option2'import Option3 from './components/option3'var createHistory = require('history').createBrowserHistoryconst history = createHistory()const TabPane = Tabs.TabPaneconst { Header, Content, Sider } = Layout;class Layout1 extends React.Component{constructor(props){super(props)this.newTabIndex = 0const panes = []const menuPanes=[{ title:"tab1", content: Option1, key: "1",router:"/option1",nav:'option1'},{ title:"tab2", content: Option2, key: "2",router:"/option2",nav:'option2'},{ title:"tab3", content: Option3, key: "3",router:"/option3",nav:'option3'}const selectedKey=""this.state = {panes,menuPanes,selectedKey}}handleClick(pane){let panes = this.state.paneslet activeKey=pane.keylet flag=truedebuggerpanes.length > 0 && panes.map((item,i)=>{if(item.key == activeKey){flag = false}})if(!panes||panes.length===0||flag){panes.push(pane)}let selectedKey=activeKeythis.setState({ panes, activeKey,selectedKey })}onChange = (activeKey) => {const panes = this.state.paneslet routerpanes.map((item,i)=>{if(activeKey === item.key){router = item.routerreturn false}})history.push(router)let selectedKey=activeKeythis.setState({selectedKey ,activeKey })}this[action](targetKey)}add = () => {const panes = this.state.panesconst activeKey = `newTab${this.newTabIndex }`panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey })this.setState({ panes, activeKey })}remove = (targetKey) => {debuggerlet activeKey = this.state.activeKeylet lastIndexthis.state.panes.forEach((pane, i) => {if (pane.key == targetKey) {lastIndex = i - 1}})const panes = this.state.panes.filter(pane => pane.key != targetKey);if (lastIndex >= 0 && activeKey === targetKey) {}this.setState({ panes, activeKey })}render(){return 我是顶部通栏theme="dark"mode="inline"defaultSelectedKeys={['1']}selectedKeys={[this.state.selectedKey]}style={{ height: '100%', borderRight: 0 }}>{this.state.menuPanes.map(item=>{return
this.handleClick(item)}>{item.nav}})}
onChange={this.onChange.bind(this)}type="editable-card">{this.state.panes && this.state.panes.map(pane => {let Component = pane.contentreturn })}}}export default Layout1