react-bootstrap以编程方式更改活动选项卡

import React, { useState } from 'react';
import { Tab, Nav } from 'react-bootstrap';

const MyTabs = () => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabChange = (index) => {
    setActiveTab(index);
  };

  return (
    <div>
      <Nav variant="tabs" activeKey={activeTab} onSelect={handleTabChange}>
        <Nav.Item>
          <Nav.Link eventKey={0}>Tab 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey={1}>Tab 2</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey={2}>Tab 3</Nav.Link>
        </Nav.Item>
      </Nav>

      {activeTab === 0 && <div>Content for Tab 1</div>}
      {activeTab === 1 && <div>Content for Tab 2</div>}
      {activeTab === 2 && <div>Content for Tab 3</div>}
    </div>
  );
};

export default MyTabs;