Reactjs “未知道具”;主动的;从React引导使用带有MenuItem的LinkContainer

Reactjs “未知道具”;主动的;从React引导使用带有MenuItem的LinkContainer,reactjs,react-bootstrap,Reactjs,React Bootstrap,我有一个使用react引导构建的简单导航栏,其中包含一个下拉列表。在下拉列表中,我用LinkContainer元素(react router bootstrap)将每个MenuItem包装在下拉列表中,以将项目链接到routes并突出显示活动项目。表面上一切正常,但控制台中有以下警告: Warning: Unknown prop `active` on <li> tag. Remove this prop from the element. For details, see http

我有一个使用react引导构建的简单导航栏,其中包含一个下拉列表。在下拉列表中,我用LinkContainer元素(react router bootstrap)将每个MenuItem包装在下拉列表中,以将项目链接到routes并突出显示活动项目。表面上一切正常,但控制台中有以下警告:

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
警告:标签上的未知属性'active'。从元件上拆下此道具。有关详细信息,请参阅https://facebook.github.io/react/warnings/unknown-prop.html
在li中(由ImmerseNavbar创建)
在ul中(通过下拉菜单创建)
在RootCloseWrapper中(通过下拉菜单创建)
在下拉菜单中(通过下拉菜单创建)
在li中(通过下拉菜单创建)
在下拉列表中(由非受控(下拉列表)创建)
处于非受控状态(下拉菜单)(由NavDropdown创建)
在NavDropdown中(由ImmerseNavbar创建)
在ul中(由Nav创建)
导航中(由Inmersenavbar创建)
在div中(由网格创建)
栅格中(由导航栏创建)
导航中(由导航栏创建)
在导航栏中(由非受控(导航栏)创建)
在非受控(导航栏)(由ImmerseNavbar创建)
在节中(由ImmerseNavbar创建)
在ImmerseNavbar中(由应用程序创建)
在div中(由应用程序创建)
应用内(由RouterContext创建)
路由器上下文中(由路由器创建)
路由器内
输入提供者
从我阅读react引导github上的问题(以及其他问题)所了解的情况来看,我认为问题与将活动道具从
传递到
  • 有关。我还没有反应过来,这应该是固定的,所以有什么我做错了吗

    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;
    
    const ImmerseNavbar=props=>(
    项目1
    项目2
    项目3.1
    项目3.2
    组织机构
    管理
    使用者
    来源
    注销
    );
    导出默认的VBAR;
    
    问题肯定在
    代码中,就好像我删除了该块,问题就消失了。使用:

    • 反应引导:0.30.7
    • 反应还原:4.4.6
    • 反应路由器:3.0.0
    • react路由器引导:0.23.1
    • 反应:15.4.1
    • 反应dom”:15.4.1

    任何帮助都将不胜感激

    激活的
    道具只能应用于
    链接
    组件。 但是您的问题可以在
    MenuItem
    组件中解决。在传递所有道具之前,您可以移除
    active
    道具并传递其余道具

    const {active, ...withoutActive} = this.props;
    // do somethign
    return <MenuItem {...withoutActive}/>
    
    const{active,…withoutActive}=this.props;
    //做点什么
    返回
    
    同时看看答案,它会对你们有用


    我希望它会有所帮助。

    所以我发现了这一点,而这确实是我做错了的事情-这是
    导航下拉列表中原始的
    li
    元素被传递给
    活动的
    道具。将其切换为正确的
    菜单项(在我的情况下
    )仍然呈现了我想要的相同的
    li
    元素,但是
    MenuItem
    过滤掉了
    active
    道具,因此清除了错误。

    谢谢你的建议,但是我相信这应该由
    MenuItem
    处理。我在
    LinkContainer
    中的
    NavItem
    实例不要抛出错误,据我所知,
    MenuItem
    的行为应该与
    NavItem
    基本相同,只是用于下拉列表,我认为这可能是一个错误