Unbekannte Prop "Active" mit LinkContainer mit MenuItem von React Bootstrap

Question

Ich habe eine einfache Navbar mit react-Bootstrap gebaut, die ein Dropdown enthält. Im Dropdown-Menü habe ich jedes MenuItem im Dropdown-Menü mit einem LinkContainer-Element (react-router-bootstrap) umschlossen, um die Elemente mit Routen zu verknüpfen und das aktive Element hervorzuheben. Es funktioniert alles auf der Oberfläche in Ordnung, aber ich die folgende Warnung in der Konsole erhalten:

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 

Von dem, was ich aus der Lektüre die Probleme auf dem reagieren-Bootstrap Github (https://github.com/react-bootstrap/react-bootstrap/issues/1994 unter anderem) zu verstehen, ich glaube, die Problem ist mit <MenuItem> zu tun, die aktive Requisite von <LinkContainer> hinunter zum <li>. Ich bin ziemlich neu zu reagieren, und das soll behoben sein, also gibt es etwas, was ich falsch mache?

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; 

Das Problem ist auf jeden Fall innerhalb des <NavDropdown> Code, als ob ich, dass das Problem verschwindet blockieren entfernen. Mit:

• reagieren-Bootstrap: 0.30.7
• reagieren-redux: 4.4.6
• reagieren-Router: 3.0.0
• reagieren-Router-Bootstrap: 0.23.1
• reagieren: 15.4.1
• reagieren-dom ": 15.4.1

Jede Hilfe viel

würde geschätzt

Answer 1

Also habe ich das herausgefunden, und es war in der Tat etwas, was ich falsch gemacht habe - es war das rohe li Element innerhalb der NavDropdown wurde die active prop. Übergeben. Schalten Sie dies für eine ordnungsgemäße MenuItem (in meinem Fall <MenuItem header>) immer noch gerendert li Element, das ich wollte, aber MenuItem filtert die active Prop, so dass der Fehler gelöscht.

Answer 2

Die active Stütze kann nur für Link Komponente verwendet werden. Aber Ihr Problem kann innerhalb MenuItem Komponente behoben werden. Intead von allen Requisiten vorbei können Sie active Requisiten entfernen und den Rest von ihnen

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

auch einen Blick auf this Antwort nehmen passieren, kann es für Sie nützlich sein.

Ich hoffe, es wird helfen.