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中，如果没有警告（https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes），则无法将道具传递给非真实属性的DOM元素。

您可以通过执行以下操作来解决问题：

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

Answer 2

要通过React传递非标准属性，必须遵循使用＆＃34;数据的＃5约定 - ＆＃34;前缀，没有camelCase。允许以下内容：

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

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

2 个答案: