反应引导选项卡： 警告：在 '' 的上下文中，'s <TabContainer><NavItem>被赋予生成的 'id' 和 'aria-controls' 属性

Question

每当为我加载Navbar时，我都会收到此警告。我不知道该怎么办或它的含义 - 我尝试在没有运气的情况下添加父级。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>`.

为此，Navbar Tabs按预期完全工作。它只是不断地将此警告在控制台中。

从此处使用的示例，示例代码：

  <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的孩子这样的项目。

btw：为什么不将其包装在NavItem中？