Неизвестная опора активна с использованием LinkContainer с MenuItem из React Bootstrap

У меня есть простая навигационная панель, построенная с использованием реакции-начальной загрузки, которая содержит раскрывающийся список. Внутри раскрывающегося списка я обернул каждый элемент меню в раскрывающемся списке элементом LinkContainer (response-router-bootstrap), чтобы связать элементы с маршрутами и выделить активный элемент. На первый взгляд все работает нормально, но в консоли появляется следующее предупреждение:

Warning: Unknown prop `active` on <li> tag. Remove this prop from the element. For details, see https://facebook.github.io/react/warnings/unknown-prop.html
in li (created by ImmerseNavbar)
in ul (created by DropdownMenu)
in RootCloseWrapper (created by DropdownMenu)
in DropdownMenu (created by Dropdown)
in li (created by Dropdown)
in Dropdown (created by Uncontrolled(Dropdown))
in Uncontrolled(Dropdown) (created by NavDropdown)
in NavDropdown (created by ImmerseNavbar)
in ul (created by Nav)
in Nav (created by ImmerseNavbar)
in div (created by Grid)
in Grid (created by Navbar)
in nav (created by Navbar)
in Navbar (created by Uncontrolled(Navbar))
in Uncontrolled(Navbar) (created by ImmerseNavbar)
in section (created by ImmerseNavbar)
in ImmerseNavbar (created by App)
in div (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router
in Provider

Насколько я понял из чтения проблем на github response-bootstrap (https://github.com/react-bootstrap/react-bootstrap/issues/1994 среди прочего), я думаю, проблема связана с <MenuItem> передачей активной опоры от <LinkContainer> до <li>. Я новичок, чтобы реагировать, и это должно быть исправлено, так что я что-то делаю не так?

navbar.js

const ImmerseNavbar = props => (
  <section id="header">
    <Navbar fixedTop fluid>
        <Navbar.Header>
            <Navbar.Brand>
                <Link to="/">
                    <img src="/logo.png"/>
                </Link>
            </Navbar.Brand>
        </Navbar.Header>
        <Nav>
            <IndexLinkContainer to="/">
                <NavItem eventKey={1} >
                    <i className="fa fa-th"/>&nbsp;
                    Item 1
                </NavItem>
            </IndexLinkContainer>
            <LinkContainer to="/favourites">
                <NavItem eventKey={2}>
                    <i className="fa fa-star"/>&nbsp;
                    Item 2
                </NavItem>
            </LinkContainer>
        </Nav>
        <Nav pullRight>
            <NavDropdown eventKey={3} title="User Name" id="basic-nav-dropdown">

                <LinkContainer to="/preferences">
                    <MenuItem eventKey={3.1}>Item 3.1</MenuItem>
                </LinkContainer>
                <LinkContainer to="/account">
                    <MenuItem eventKey={3.2}>Item 3.2</MenuItem>
                </LinkContainer>
                <MenuItem divider />
                <li className="dropdown-header">Organisation</li>
                <LinkContainer to="/organisation/manage">
                    <MenuItem eventKey={3.3}>Manage</MenuItem>
                </LinkContainer>
                <LinkContainer to="/organisation/users">
                    <MenuItem eventKey={3.3}>Users</MenuItem>
                </LinkContainer>
                <LinkContainer to="/organisation/sources">
                    <MenuItem eventKey={3.3}>Sources</MenuItem>
                </LinkContainer>
                <MenuItem divider />
                <LinkContainer to="/logout">
                    <MenuItem eventKey={3.3}>Log out</MenuItem>
                </LinkContainer>
            </NavDropdown>
        </Nav>
      </Navbar>
    </section>
);

export default ImmerseNavbar;

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

  • реакция-бутстрап: 0,30,7
  • реакция-редукция: 4.4.6
  • реагировать-маршрутизатор: 3.0.0
  • реакция-маршрутизатор-начальной загрузки: 0.23.1
  • реагировать: 15.4.1
  • реагировать-дом ": 15.4.1

Любая помощь приветствуется


reactjs react-bootstrap
person Jack Butler    schedule 08.12.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Свойство active может применяться только для Link компонента. Но ваша проблема может быть решена в MenuItem компоненте. Вместо того, чтобы передавать все реквизиты, вы можете удалить active реквизита и передать остальные.

const {active, ...withoutActive} = this.props;
// do somethign
return <MenuItem {...withoutActive}/>

Также ознакомьтесь с ответом this, это может быть вам полезен.

Надеюсь, это поможет.

person The Reason    schedule 08.12.2016
comment
Спасибо за ваше предложение, однако я считаю, что это все равно должно выполняться MenuItem. Экземпляры NavItem внутри LinkContainer не вызывают ошибки, и, насколько я понимаю, MenuItem должен вести себя примерно так же, как NavItem, за исключением того, что он используется для раскрывающихся списков, поэтому я думаю, что это может быть ошибка - person Jack Butler; 08.12.2016

arrow_upward
0
arrow_downward

Итак, я понял это, и это действительно было что-то, что я делал неправильно - это был необработанный элемент li внутри NavDropdown, который передал active prop. Отключение этого параметра для правильного MenuItem (в моем случае <MenuItem header>) по-прежнему отображало тот же элемент li, который я хотел, но MenuItem отфильтровывает свойство active, поэтому ошибка устранена.

person Jack Butler    schedule 10.01.2017