未知道具 "active" 使用 LinkContainer 和 React 的 MenuItem Bootstrap

Question

我有一个使用 react-bootstrap 构建的简单导航栏，其中包含一个下拉菜单。在下拉列表中，我用 LinkContainer 元素 (react-router-bootstrap) 将下拉列表中的每个 MenuItem 包裹起来，以 link 将项目路由并突出显示活动项目。表面上一切正常，但是我在控制台中收到以下警告：

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

根据我阅读关于 react-bootstrap github（https://github.com/react-bootstrap/react-bootstrap/issues/1994 等）的问题，我认为问题与 <MenuItem> 有关将 active prop 从 <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> 代码内，好像我删除了那个块问题就消失了。使用：

反应-bootstrap：0.30.7
react-redux: 4.4.6
反应路由器：3.0.0
反应路由器-bootstrap: 0.23.1
反应：15.4.1
反应-dom": 15.4.1

如有任何帮助，我们将不胜感激

Answer 1

active 属性只能应用于 Link 组件。但是您的问题可以在 MenuItem 组件中解决。 Intead 传递所有道具，您可以删除 active 道具并传递其余道具

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

另请参阅答案，它可能对您有用。

希望对您有所帮助。

Answer 2

所以我想通了，这确实是我做错了 - 它是 NavDropdown 中的原始 li 元素被传递给 active 道具。将其切换为适当的 MenuItem（在我的情况下为 <MenuItem header>）仍然呈现我想要的相同 li 元素，但 MenuItem 过滤掉 active 道具所以清除了错误。

未知道具 "active" 使用 LinkContainer 和 React 的 MenuItem Bootstrap

Unknown prop "active" using LinkContainer with MenuItem from React Bootstrap

reactjs

react-bootstrap