Antd Design 使用tabBarExtraContent

最新推荐文章于 2025-06-29 09:10:46 发布

Tangzongyu123

最新推荐文章于 2025-06-29 09:10:46 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：日记文章标签： react antd tabs

本文链接：https://blog.youkuaiyun.com/Tangzongyu123/article/details/79174794

日记专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在 Antd Design 的 Tab 组件中使用 tabBarExtraContent 属性来控制附加内容的显示与隐藏。通过 React 的状态管理，在不同的 Tab 页中展示特定的额外内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Antd Design 使用tabBarExtraContent，想让这个附加的内容在某些页面显示，某些页面不显示

const PANE_KEY = '1';
@observer
class LadderIndex extends React.Component {
  state = {
    paneKey: PANE_KEY,
  }

  onChangePane = (key) => {
    this.setState({
      paneKey: key,
    });
  };

  createBarExtraContent = () => {
    return (
      this.state.paneKey === '1' &&
      (<div>
        这里放置的就是附加的内容
      </div>)
    );
  }

  render() {
    if (LadderStore.listLoading) return <Loading />;
    return (
      <div>
        <Card
          style={{ margin: 15 }}
        >
          <Tabs
            defaultActiveKey="1"
            onChange={this.onChangePane}
            tabBarExtraContent={this.createBarExtraContent()}
          >
            <TabPane tab={__('TabPane1', 'ladder')} key="1">

            </TabPane>
            <TabPane tab={__('TabPane2', 'ladder')} key="2">

            </TabPane>
          </Tabs>
          <br />
        </Card>
      </div>
    );
  }
}

export default LadderIndex;