# 可关闭页签通用组件

项目来源:监测系统 - 抽取

## 1.功能说明

定义可关闭的页签，同时提供关闭页签的回调函数接口

## 2.组件依赖

- react

- antd

## 3.依赖结构体

```tsx
export interface Pane{
    title: string,
    uuid: string,
    closable: boolean,
}
```

## 4.组件接口

```tsx
interface IProps {
    panes: Pane[];            //展示的标签数组
    selectedKey?: string;
    onChange: (key) => void;  //切换标签时的回调函数
    onClose: (key) => void;   //关闭标签时的回调函数
    onCloseAll: () => void;   //关闭所有标签时的回调函数
}
```

## 5.案例

1)引入依赖

```tsx
import ClosableTabs from './common/closable-tabs';
import { Pane } from './common/closable-tabs';
```

2)在组件外部定义好页签以及页签的改变、关闭回调

```tsx
const initPanes = [
    {title: "小明", uuid: "1", closable: true},
    {title: "小红", uuid: "2", closable: true},
    {title: "小刚", uuid: "3", closable: true}, 
];
const [panes, setPanes] = useState<Pane[]>(initPanes);

const [selectedKey, setSelectedKey] = useState<string>();

const onClose = (key) => {
    let newPanes = []
    panes.forEach(pane => {
        if(pane.uuid != key){
            newPanes.push(pane)
        }
    })
    setPanes(newPanes)
}

const onChange = (key) => {
    setSelectedKey(key);
}

const onCloseAll = () => {
    setPanes([]);
}
```

3)在函数式组件的return中加入：

```tsx
<div style={{backgroundColor:"#ff0000", width:"30%"}} onClick={() => {setPanes(initPanes)}}>恢复出厂设置</div>
<div style={{width:"50%"}}>
    <ClosableTabs 
        panes={panes}
        selectedKey={selectedKey}
        onClose={onClose}
        onChange={onChange}
        onCloseAll={onCloseAll}
        />
</div>
```