react tabs 生成

image.png

准备工作

安装 mobx
(2)events(npm i events -S) https://blog.csdn.net/qq_40924034/article/details/104814694

addTabs --组件A

import React from 'react'
import {Button} from "antd";
import {observer} from 'mobx-react'
import tabsStore from "../../store/TabsStore";  //引入状态管理文件 局部引入
import emitter from '../../util/event'   //引入 event 
@observer
class AddTabs extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            panes:tabsStore.getPane().panes, //初始 tabs
        };
    }
    add = () => {
        var key = JSON.stringify(parseInt(this.state.panes[parseInt(this.state.panes.length)-1].key)+1)  // key值是panes数组最后一项的key键的值加一
        tabsStore.addTabs('导航'+key,'/login'+key,key) // 使用 状态管理的方法
        emitter.emit('key', key)   //兄弟之间传值

    };
    render() {
        return (
            <div style={{ marginBottom: 16 }}>
                <Button onClick={this.add}>ADD</Button>
            </div>
        )
    }
}
export {AddTabs as default}

TabsT --组件B

import React from 'react';
import { Tabs } from 'antd';
import {observer} from 'mobx-react'
import tabsStore from "../../store/TabsStore";
import emitter from '../../util/event'

const { TabPane } = Tabs;

@observer
class TabsT extends React.Component {
    constructor(props) {
        super(props);
// 接收A组件传的值
        emitter.on('key', opt => {
             // 参数
            this.setState({
                activeKey: opt
            })
        }) 
//初始数据
        this.state = {
            panes:tabsStore.getPane().panes,
            activeKey: tabsStore.getKey().activeKey,
        };
    }

//点击对应的标签页的显示
    onChange =( activeKey) => {
        tabsStore.setActiveTabs(activeKey)
        this.setState({ activeKey });
    };
    // 叉掉标签页
    onEdit = (targetKey) => {
        this.remove(targetKey)
    };

//移除
    remove = (targetKey) => {
    //判断移除项是否是激活状态
        if (this.state.activeKey==targetKey){
            console.log(1)
            this.onChange(JSON.stringify(parseInt(targetKey)-1))
        }
        tabsStore.removeTabs(targetKey)
    };



    render() {
        return (
            <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 {TabsT as default}

tabsStore

import { observable, action } from 'mobx'

class TabsStore {
    @observable  panes = [
        { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
    ];//初始标签显示几个
    @observable  activeKey=this.panes[0].key//激活的

    @action
        getPane(){
        return {
            panes:this.panes,
        }
    }
    获取激活的key
    getKey(){
        return  {
            activeKey:this.activeKey
        }
    }

    // 添加标签
        addTabs(title,url,key){
            this.panes.push({ title: title, content: url, key: key });
            this.activeKey = key
        }

    // 点击标签页显示
        setActiveTabs(activeIndex){
            this.activeKey = activeIndex
        }
    // 移除标签
        removeTabs(targetKey){
        this.panes.forEach((pane, i) => {
            if (pane.key==targetKey){
                if (this.panes.length>1){
                    if (i==0){
                        this.panes.splice(i,1)
                    }else {
                        this.panes.splice(i,1)
                    }
                }
            }
        });
    }
}

const tabsStore = new TabsStore;

export default  tabsStore;

event

import { EventEmitter } from 'events'
export default new EventEmitter()