tabpane1联动html,react+antd+mune+tab联动

【实例简介】

【实例截图】

【核心代码】

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').createBrowserHistory

const history = createHistory()

const TabPane = Tabs.TabPane

const { Header, Content, Sider } = Layout;

class Layout1 extends React.Component{

constructor(props){

super(props)

this.newTabIndex = 0

const 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 = {

activeKey: panes.length==0 ? '1':panes[0].key,

panes,

menuPanes,

selectedKey

}

}

handleClick(pane){

let panes = this.state.panes

let activeKey=pane.key

let flag=true

debugger

panes.length > 0 && panes.map((item,i)=>{

if(item.key == activeKey){

flag = false

}

})

if(!panes||panes.length===0||flag){

panes.push(pane)

}

let selectedKey=activeKey

this.setState({ panes, activeKey,selectedKey })

}

onChange = (activeKey) => {

const panes = this.state.panes

let router

panes.map((item,i)=>{

if(activeKey === item.key){

router = item.router

return false

}

})

history.push(router)

let selectedKey=activeKey

this.setState({selectedKey ,activeKey })

}

onEdit = (targetKey, action) => {

this[action](targetKey)

}

add = () => {

const panes = this.state.panes

const activeKey = `newTab${this.newTabIndex }`

panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey })

this.setState({ panes, activeKey })

}

remove = (targetKey) => {

debugger

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 (lastIndex >= 0 && activeKey === targetKey) {

activeKey = panes[lastIndex].key

}

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)}

activeKey={this.state.activeKey}

type="editable-card"

onEdit={this.onEdit}

>

{

this.state.panes && this.state.panes.map(pane => {

let Component = pane.content

return

})

}

}

}

export default Layout1