What is the correct way to pass props to NavItem

问题

My code works but give an error so I just wanted to inform how I can prevent an error from showing up.

I'd like to learn how to write correct code.

This is what my code looks like now:

export const AuthenticatedNavigation = (props) => {
  const activeCity = props.activeCity;

  return (
    <div>
      <Nav className="fluid-container">
        <LinkContainer to="beijing" >
          <NavItem eventKey={ 1 } href="">Chapter 1: Beijing</NavItem>
        </LinkContainer>
            <LinkContainer to="shanghai">
          <NavItem eventKey={ 2 } activeCity={props.activeCity} href="/shanghai">{activeCity}</NavItem>
        </LinkContainer>
            <LinkContainer to="chengdu">
          <NavItem eventKey={ 3 } href="/chengdu">Chapter 3: Chengdu</NavItem>
        </LinkContainer>
      </Nav>

      <Nav className="navbar-right">
        <LinkContainer to="about">
          <NavItem eventKey={ 1 } href="/about">About</NavItem>
        </LinkContainer>
        <NavDropdown eventKey={ 2 } title={ userName() } id="basic-nav-dropdown">
          <MenuItem eventKey={ 2.1 } onClick={ handleLogout }>Logout</MenuItem>
        </NavDropdown>
      </Nav>
    </div>
)}

This is the error code I am getting:

modules.js:4689 Warning: Unknown prop `activeCity` on <a> tag. Remove this prop from the element. For details, see link        
    in a (created by SafeAnchor)
    in SafeAnchor (created by NavItem)
    in li (created by NavItem)
    in NavItem (created by AuthenticatedNavigation)
    in LinkContainer (created by AuthenticatedNavigation)
    in ul (created by Nav)
    in Nav (created by AuthenticatedNavigation)
    in div (created by AuthenticatedNavigation)
    in AuthenticatedNavigation (created by AppNavigation)
    in div (created by NavbarCollapse)
    in Transition (created by Collapse)
    in Collapse (created by NavbarCollapse)
    in NavbarCollapse (created by AppNavigation)
    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 AppNavigation)
    in AppNavigation (created by Container(AppNavigation))
    in Container(AppNavigation) (created by App)
    in div (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router

As I said, it works, but I'd rather not have any errors ofcourse.

Cheers, Dominic

回答1:

To pass non-standard attributes through React, you must follow the HTML 5 convention of using the "data-" prefix and no camelCase. The following is allowed:

<NavItem eventKey={ 2 } data-active-city={activeCity} href="/shanghai">{activeCity}</NavItem>

回答2:

In your NavItem component, you probably have something like:

render: function() {
    return <a href={this.props.href} activeCity={this.props.activeCity}>{this.props.children}</a>;
}

In the latest versions of React, you can't pass props to DOM elements that aren't real attributes without a warning (https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes).

You could fix by doing the following:

render: function() {
    return <a href={this.props.href}>{this.props.children}</a>;
}

来源：https://stackoverflow.com/questions/40941569/what-is-the-correct-way-to-pass-props-to-navitem

标签

javascript

reactjs

react-bootstrap