Tabs的标签右边可以添加多个操作吗?

#1

今天碰到了一个需求,,就是要在Tabs的标签右侧添加多个操作,看过文档只提供了添加一个操作的方法,试想应该事要封装一下,但是刚接触Ant Design,还不是太熟悉,所以,如果有遇到过这类问题的前辈,麻烦提供一下思路或者代码,先谢过啦。

#2
import { Tabs, Button } from 'antd';
const TabPane = Tabs.TabPane;

const operations = <Button>Extra Action</Button>;
cosnt moreOperations = <div><Button>添加</Button><Button>删除</Button><Button>修改</Button></div>

ReactDOM.render(
  <Tabs tabBarExtraContent={moreOperations}>
    <TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
  </Tabs>
, mountNode);

你要这样子?

#3

先谢谢啦。我的需求是第一个TabPane界面时,右侧时一个搜索框和button,在跳转到第二个TabPane时右边标签变成两个Button,那应该怎么写呢?

#5
<Tabs tabBarExtraContent={ isFirstTab ? <div>1</div> : isSecondTab ? <div>2</div> : null }>
#6

谢谢哥,但我还是有一点不太明白,isFirstTab 指的是 第一个TabPane 的ID吗?

#7

就是一个标记呗,这个标记代表当前选中的tab,是不是第一个tab,还是第二个tab

#8

哦哦,好,谢谢哥啦。