react-bootstrap: Warnings about unknown props

问题

I'm not sure why but I am noticing a lot of warnings in my browser console regarding unknown props. Following are some of the warnings:

"Warning: Unknown prop `navbar` on <ul> tag. Remove this prop from the element. For details, see 
    in ul (created by Nav)
    in Nav (created by NavbarWrapper)
    in div (created by NavbarWrapper)"

"Warning: Unknown prop `divider` on <a> tag. Remove this prop from the element. For details, see 
    in a (created by SafeAnchor)
    in SafeAnchor (created by MenuItem)
    in li (created by MenuItem)
    in MenuItem (created by NavbarWrapper)
    in ul (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 NavbarWrapper)
    in ul (created by Nav)
    in Nav (created by NavbarWrapper)"

NavbarWrapper is a react component that I wrote which renders a react-bootstrap navbar.

I only started noticing these warnings as of today (July 4, 2016). However, the navbar is working as expected.

I am using meteor 1.3.4.1, react 15.1.0, and react-bootstrap 0.29.5

Can please somebody let me know if I am doing something wrong?

回答1:

Not really an answer(new user, can't comment yet) but it seems that react recently upgraded to version 0.15.2 and part of the changes was giving off a warning for passing a unknown elements(or props) to dom.

This won't break your UI but would include annoying warning logs to your browser console.

Additional relevant links: https://github.com/react-bootstrap/react-bootstrap/issues/1970

回答2:

I downgraded to v15.0.1 of React, and now all is fine again. The warnings actually broke my app, so a downgrade was necessary :(

回答3:

in v15.2.0, React validates the props being passed to DOM elements(ul, div etc..). React expects valid props being passed to DOM elements. Props like 'style', 'className', 'htmlFor' etc are valid props. It is okay to pass whatever props to your own ReactComponents (like <ChatBox msg=''/>, <Book rack='1'/>) but not to core DOM elements. May be not a solution in your case, but if you append 'data-' to the prop name like 'data-propname' React doesn't complain.

来源：https://stackoverflow.com/questions/38175958/react-bootstrap-warnings-about-unknown-props

标签

meteor

react-bootstrap