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

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>有关。我对反应相当陌生，这应该被修复，所以我做错了什么吗？

导航栏.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

任何帮助将不胜感激

Answer 1

active道具只能应用于Link组件。 但是您的问题可以在MenuItem组件中修复。通过所有道具后，您可以删除active道具并通过其余道具

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

也看看this答案，它可能对你有用。

我希望它会有所帮助。

Answer 2

所以我想通了这一点，这确实是我做错了什么——是NavDropdown内的原始li元素被传递给了active道具。将其切换为适当的MenuItem(在我的情况下<MenuItem header>)仍然渲染了我想要的相同li元素，但MenuItem过滤掉了active道具，因此清除了错误。