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

React.js是一个用于构建用户界面的JavaScript库，而Bootstrap是一个用于构建响应式和移动设备优先的网站的前端框架。在单击按钮时动态添加选项卡可以通过以下步骤实现：

首先，确保你已经安装了React.js和Bootstrap的依赖包。
创建一个React组件，命名为Tabs，用于渲染选项卡和按钮。
在Tabs组件的state中添加一个数组，用于存储选项卡的内容。
在render方法中，使用Bootstrap的组件和样式创建一个选项卡容器，并遍历state中的选项卡内容数组，渲染每个选项卡。
在render方法中，添加一个按钮，用于触发添加选项卡的操作。
在按钮的onClick事件处理函数中，使用setState方法更新state中的选项卡内容数组，添加一个新的选项卡。

下面是一个示例代码：

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;

这个示例代码使用了React Bootstrap库来创建选项卡和按钮。在Tabs组件的state中，我们初始化了两个选项卡。在render方法中，我们使用map函数遍历state中的选项卡内容数组，创建对应的选项卡。在按钮的onClick事件处理函数中，我们使用setState方法更新state中的选项卡内容数组，添加一个新的选项卡。

这样，当你在浏览器中渲染TabsComponent组件时，你将看到一个包含两个选项卡和一个按钮的界面。每次点击按钮时，将动态添加一个新的选项卡。

推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）和腾讯云云数据库MySQL（https://cloud.tencent.com/product/cdb_mysql）。

请注意，以上答案仅供参考，实际实现可能因具体需求和环境而有所不同。