如何使用React js和Bootsrap 4在单击按钮时动态添加选项卡

import React, { Component } from 'react';
import { Tab, Tabs, Button } from 'react-bootstrap';

class TabsComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabs: ['Tab 1', 'Tab 2'],
    };
  }

  addTab = () => {
    const { tabs } = this.state;
    const newTab = `Tab ${tabs.length + 1}`;
    this.setState({ tabs: [...tabs, newTab] });
  };

  render() {
    const { tabs } = this.state;
    return (
      <div>
        <Tabs>
          {tabs.map((tab, index) => (
            <Tab key={index} title={tab}>
              {/* Tab content */}
            </Tab>
          ))}
        </Tabs>
        <Button onClick={this.addTab}>Add Tab</Button>
      </div>
    );
  }
}

export default TabsComponent;