将道具传递给 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

如我所说，它有效，但我当然不希望出现任何错误。

干杯，多米尼克

Answer 1

在您的 NavItem 组件中，您可能有类似的内容：

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

在最新版本的 React 中，您不能在没有警告的情况下将 props 传递给不是真实属性的 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>;
}

Answer 2

要通过 React 传递非标准属性，您必须遵循 HTML 5 使用 "data-" 前缀且不使用驼峰命名法的约定。允许以下内容：

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

将道具传递给 NavItem 的正确方法是什么

What is the correct way to pass props to NavItem

javascript

reactjs

react-bootstrap