javascript - React Bootstrap 选项卡 - 尝试控制选项卡但失败

Question

我正在尝试使用挂钩来控制react-bootstrap选项卡。但是我不确定如何使用Navand将其加倍Tab.Content。官方文档提供了有关如何正常执行此操作的说明，但Tabs不适用于我正在尝试执行的操作。

例如，每当我加载我的 SPA 时，默认选项卡都不会显示任何内容。我必须单击Tab 1或Tab 2在加载任何内容之前单击。

这是我的名片：

              <Card style={{ borderRadius: "0px" }}>
                <TabContainer>
                  <Card.Header>
                    <Nav variant="pills">
                      <Nav.Item>
                        <Nav.Link eventKey="first">
                          <div>Tab 1</div>
                        </Nav.Link>
                      </Nav.Item>
                      <Nav.Item>
                        <Nav.Link eventKey="second">Tab 2</Nav.Link>
                      </Nav.Item>
                    </Nav>
                  </Card.Header>
                  <Card.Body>
                      <Tab.Content>
                        <Tab.Pane eventKey="first">FIRST</Tab.Pane>
                        <Tab.Pane eventKey="second">SECOND</Tab.Pane>
                      </Tab.Content>
                  </Card.Body>
                </TabContainer>
              </Card>

我该如何使用const [value,setValue] = useState('Tab 1')它？

标签： javascriptreactjsreact-hookstabsreact-bootstrap