Tab React-bootstrap: Cảnh báo: Trong ngữ cảnh của một `<TabContainer>`, `<NavItem>` s được tạo ra các thuộc tính `id` và` aria-controls` được tạo ra

Question

Tôi nhận được cảnh báo này bất cứ khi nào thanh điều hướng được tải cho tôi. Tôi không biết phải làm gì với nó hay ý nghĩa của nó - tôi đã thử thêm một div cha mẹ không may mắn. Các tài sản generateChildId theo tài liệu của họ chỉ có chức năng như đầu vào. Siêu khó hiểu.

Full cảnh báo:

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>`. 

Vì lợi ích của nó, navbar + tab hoạt động hoàn toàn như dự định. Nó chỉ đơn giản là ném cảnh báo này liên tục trong giao diện điều khiển.

Ví dụ sử dụng from here, mẫu mã:

<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> 
); 

Googling cảnh báo này cung cấp gần như không có gì

Answer 1

tôi nghĩ là bởi vì bạn được cung cấp một id-NavDropdown phần tử.

Cảnh báo có thể hiển thị thông báo sai vì không mong đợi mục đó là con của Nav.

BTW: tại sao không gói nó bên trong một NavItem?