React-Bootstrap - 添加外部下一个上一个按钮选项卡

Question

我在我的 ReactJS 项目中为 Boostra4 使用 ReactJS 选项卡式组件。

https://react-bootstrap.github.io/components/tabs/

我正在为选项卡使用“自定义选项卡布局”结构。

      <Tab.Container id="left-tabs-example" defaultActiveKey="first">
      <Row>
        <Col sm={3}>
          <Nav variant="pills" className="flex-column">
            <Nav.Item>
              <Nav.Link eventKey="first">Tab 1</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link eventKey="second">Tab 2</Nav.Link>
            </Nav.Item>
          </Nav>
        </Col>
        <Col sm={9}>
          <Tab.Content>
            <Tab.Pane eventKey="first">
              <Sonnet />
            </Tab.Pane>
            <Tab.Pane eventKey="second">
              <Sonnet />
            </Tab.Pane>
          </Tab.Content>
        </Col>
      </Row>
    </Tab.Container>

<a href="#" class="pve_but">Previous Stage</a> 
<a href="#" class="next_but">Next Stage</a>

该选项卡按我的要求工作正常，但在代码中。 我需要自定义“NEXT”和“PREVIOUS”按钮来更改选项卡。

我不能在代码中使用 jQUERY 作为项目要求不使用 jQuery，所以 jQuery 解决方案对我不起作用。

想知道纯 reactJS 中的相同解决方案。

谢谢， Chetan Sachania