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

Posted 2023-02-21

【中文标题】使用 LinkContainer 和来自 React Bootstrap 的 MenuItem 的未知道具“活动”

【英文标题】：Unknown prop "active" using LinkContainer with MenuItem from React Bootstrap

【发布时间】：2017-04-23 13:10:01

【问题描述】：

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

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

任何帮助将不胜感激

【参考方案1】：

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

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

也可以看看this的回答，对你有用。

我希望它会有所帮助。

【讨论】：

感谢您的建议，但我相信这应该由MenuItem 处理。我在LinkContainer 中拥有的NavItem 实例不会引发错误，据我了解，MenuItem 的行为应该与NavItem 几乎相同，除了用于下拉菜单，这就是我为什么认为这可能是一个错误

【参考方案2】：

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