Question

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

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>从<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>代码中，好像我删除了该块，问题就消失了。使用：

react-bootstrap：0.30.7
react-redux：4.4.6
react-router：3.0.0
react-router-bootstrap：0.23.1
反应：15.4.1
react-dom“：15.4.1

非常感谢任何帮助

Answer 1

active道具只适用于Link组件。但是您的问题可以在MenuItem组件中修复。通过所有道具的Intead你可以删除active道具并传递其余的道具

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

另请查看this答案，它对您有用。

我希望它会有所帮助。

Answer 2

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

使用来自React Bootstrap的MenuItem的LinkContainer的未知道具“活动”

2 个答案: