Bootstrap 4选项卡列表-单击时切换选项卡

Question

我正在研究React JS。

我已经在页面上实现了bootstrap 4标签列表。

我还有一个侧面菜单，它是另一个组件。菜单具有三个<figure class="media-container aspect-ratio-16x9"> <img src="https://picsum.photos/id/1011/500/500" alt="Photo"/> <figcaption>This is a 16x9 image with a caption</figcaption> </figure>标签。当用户单击这些链接时，我想切换标签。

我的标签列表：

<Link />

我的菜单：

<div className="col-md-12">
            <ul className="nav nav-tabs responsive " role="tablist">
              <li className="nav-item">
                <a
                  className="nav-link active"
                  data-toggle="tab"
                  href="#home"
                  role="tab"
                >
                  Addresses
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="nav-link"
                  data-toggle="tab"
                  href="#profile"
                  role="tab"
                >
                  Contact Details
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="nav-link"
                  data-toggle="tab"
                  href="#messages"
                  role="tab"
                >
                  Relationships
                </a>
              </li>
            </ul>
          </div>

我该如何实现？