react-панель навигации начальной загрузки не работает должным образом

#reactjs #react-bootstrap

Вопрос:

Я довольно новичок в react, и у меня возникла эта проблема <NavDropdown.Item> в следующем классе:

 import React, { Component } from 'react';
import { Nav, Navbar, NavItem, NavDropdown } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import './NavMenu.css';


export class NavMenu extends Component {
  displayName = NavMenu.name


  render() {
    return (
        <Navbar bg="primary" variant="dark" fluid fixedTop collapseOnSelect>
            <Navbar.Header>
                <Navbar.Brand>
                    Brand
                </Navbar.Brand>
                <Navbar.Toggle />
            </Navbar.Header>
            <Navbar.Collapse>
                <Nav>
                    <LinkContainer to={'/'} exact>
                        <NavItem>
                            Home
                        </NavItem>
                    </LinkContainer>

                    <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
  }
}

Как только я создаю свой проект, появляется следующая ошибка:

Замена <NavDropdown.Item> на <MenuItem> работает, но мне интересно, в чем причина такой проблемы.

1. Похоже, вы даже не импортируете NavBardropdown . Вы импортируете NavDropdown

2. @codemonkey, в примере, который я видел на веб-сайте react-bootstrap, используется NavDropdown, который я импортирую.

3. @Costa не могли бы вы связать пример, которому вы следовали?

4. да, конечно, @theJuls, вот оно: https://react-bootstrap.github.io/components/navbar / , я взял немного из каждого кода, и все работало хорошо, пока я не добрался до выпадающей части.

5. После быстрого просмотра я согласен с @Sajib Khan, это выглядит как несоответствие версий.

Ответ №1:

Я полагаю, что вы используете версию «react-bootstrap» 0.33.1 . И «MenuItem» используется в этой версии, чтобы она работала для вас, смотрите здесь

Вы можете обновить версию v1.4.0 до использования «NavDropdown.Элемент», смотрите здесь

1. Вы были правы, мой код запускается сейчас, когда панель навигации выглядит совсем не так, как должна, возможно, это может быть из-за несоответствия другой версии, я проведу свое исследование по этому поводу.