如何将antd库中的Tabs组件的默认添加按钮替换为自定义版本？

Question

我使用 antd 库设计了可编辑选项卡，版本 3.23.6。但我不知道如何用我的自定义添加按钮替换默认添加按钮。

我的代码

<Tabs 
onChange={tabOnChange}
activeKey={activeKey}
type="editable-card"
onEdit={tabOnEdit}
>
    {panes.map(pane => (
      <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
        {pane.content}
      </TabPane>
    ))}
</Tabs>

Answer 1

  add = () => {
    const { panes } = this.state;
    const activeKey = `newTab${this.newTabIndex++}`;
    panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
    this.setState({ panes, activeKey });
  };

  const operations = <Button>Extra Action</Button>;
  
  <Tabs activeKey={this.state.activeKey} tabBarExtraContent={operations}>
    {this.state.panes.map((pane) => (
      <TabPane tab={pane.title} key={pane.key}>
        {pane.content}
      </TabPane>
    ))}
  </Tabs>

https://ant.design/components/tabs-cn/#components-tabs-demo-custom-add-trigger https://ant.design/components/tabs-cn/#components-tabs-demo-extra

如何将antd库中的Tabs组件的默认添加按钮替换为自定义版本？

How to replace the default add button with custom version of the Tabs component in the antd library?

reactjs

antd