React-bootstrap 选项卡：警告：在 `<TabContainer>` 的上下文中，`<NavItem>` 被赋予生成的 `id` 和 `aria-controls` 属性

Question

每当为我加载导航栏时，我都会收到此警告。我不知道如何处理它或它意味着什么 - 我尝试添加一个父 div 但没有成功。根据他们的文档， generateChildId 属性仅将函数作为输入。超级混乱。

完全警告：

Warning: In the context of a `<TabContainer>`, `<NavItem>`s are given generated `id` and `aria-controls` attributes for the sake of proper component accessibility. Any provided ones will be ignored. To control these attributes directly, provide a `generateChildId` prop to the parent `<TabContainer>`.

为此，导航栏 + 选项卡完全按预期工作。它只是不断地在控制台中抛出这个警告。

使用的示例from here，示例代码：

  <Tab.Container id="tabs-with-dropdown" defaultActiveKey="first">
    <Row className="clearfix">
      <Col sm={12}>
        <Nav bsStyle="tabs">
          <NavItem eventKey="first">
            Tab 1
          </NavItem>
          <NavItem eventKey="second">
            Tab 2
          </NavItem>
          <NavDropdown eventKey="3" title="Dropdown" id="nav-dropdown-within-tab">
            <MenuItem eventKey="3.1">Action</MenuItem>
            <MenuItem eventKey="3.2">Another action</MenuItem>
            <MenuItem eventKey="3.3">Something else here</MenuItem>
            <MenuItem divider />
            <MenuItem eventKey="3.4">Separated link</MenuItem>
          </NavDropdown>
        </Nav>
      </Col>
      <Col sm={12}>
        <Tab.Content animation>
          <Tab.Pane eventKey="first">
            Tab 1 content
          </Tab.Pane>
          <Tab.Pane eventKey="second">
            Tab 2 content
          </Tab.Pane>
          <Tab.Pane eventKey="3.1">
            Tab 3.1 content
          </Tab.Pane>
          <Tab.Pane eventKey="3.2">
            Tab 3.2 content
          </Tab.Pane>
          <Tab.Pane eventKey="3.3">
            Tab 3.3 content
          </Tab.Pane>
          <Tab.Pane eventKey="3.4">
            Tab 3.4 content
          </Tab.Pane>
        </Tab.Content>
      </Col>
    </Row>
  </Tab.Container>
);

谷歌搜索此警告几乎没有任何结果

Answer 1

我认为是因为您向 NavDropdown 元素提供了 id。

警告可能显示了一条错误消息，因为它不期望 Nav.

的子项这样的项目

顺便说一句：为什么不将其包装在 NavItem 中？

React-bootstrap 选项卡：警告：在 `<TabContainer>` 的上下文中，`<NavItem>` 被赋予生成的 `id` 和 `aria-controls` 属性

React-bootstrap tabs: Warning: In the context of a `<TabContainer>`, `<NavItem>`s are given generated `id` and `aria-controls` attributes

javascript

reactjs

react-bootstrap