Каков правильный способ передачи реквизитов в NavItem

Question

Мой код работает, но дает ошибку, поэтому я просто хотел сообщить, как я могу предотвратить появление ошибки.

Я хотел бы узнать, как написать правильный код.

Это то, что мой код выглядит сейчас:

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> 
 
)}

Это код ошибки я получаю:

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

Я сказал, это работает, но я бы предпочел не иметь никаких ошибок.

Приветствие, Dominic

Answer 1

Чтобы передать нестандартные атрибуты через React, вы должны следовать HTML 5 Соглашение об использовании «DATA-» префикс и не верблюжьего. Допускается следующее:

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

Answer 2

В компоненте NavItem, вы, вероятно, что-то вроде:

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

В последних версиях среагировать, вы не можете передать реквизит к элементам DOM, которые не являются реальные атрибуты без предупреждения (https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes).

Вы можете исправить, выполнив следующие действия:

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