将道具传递给 NavItem 的正确方法是什么 [英] What is the correct way to pass props to NavItem

问题描述

我的代码有效，但出现错误，所以我只是想告诉我如何防止出现错误.

我想学习如何编写正确的代码.

这就是我的代码现在的样子:

export const AuthenticatedNavigation = (props) =>{const activeCity = props.activeCity;返回 (<div><Nav className="流体容器"><LinkContainer to="北京" ><NavItem eventKey={ 1 } href="">第一章:北京</NavItem></LinkContainer><LinkContainer to="shanghai"><NavItem eventKey={ 2 } activeCity={props.activeCity} href="/shanghai">{activeCity}</NavItem></LinkContainer><NavItem eventKey={ 3 } href="/chengdu">第三章:成都</NavItem></LinkContainer></导航><Nav className="navbar-right"><LinkContainer to="about"><NavItem eventKey={ 1 } href="/about">关于</NavItem></LinkContainer><NavDropdown eventKey={ 2 } title={ userName() } id="basic-nav-dropdown"><MenuItem eventKey={ 2.1 } onClick={ handleLogout }>Logout</MenuItem></NavDropdown></导航>

)}

这是我得到的错误代码:

modules.js:4689 警告:<a> 上的未知道具 `activeCity`标签.从元素中移除这个道具.详情见链接在(由 SafeAnchor 创建)在 SafeAnchor 中(由 NavItem 创建)in li(由 NavItem 创建)在 NavItem(由 AuthenticatedNavigation 创建)在 LinkContainer(由 AuthenticatedNavigation 创建)在 ul(由 Nav 创建)在导航中(由 AuthenticatedNavigation 创建)在 div(由 AuthenticatedNavigation 创建)在 AuthenticatedNavigation(由 AppNavigation 创建)在 div(由 NavbarCollapse 创建)过渡中(由 Collapse 创建)在折叠中(由 NavbarCollapse 创建)在 NavbarCollapse(由 AppNavigation 创建)在 div(由 Grid 创建)在网格中(由 Navbar 创建)在导航中(由导航栏创建)在导航栏中(由不受控制的(导航栏)创建)在不受控制的(导航栏)中(由 AppNavigation 创建)在 AppNavigation 中(由 Container(AppNavigation) 创建)在容器中(AppNavigation)(由 App 创建)在 div(由 App 创建)在应用程序中(由 RouterContext 创建)在 RouterContext 中(由路由器创建)在路由器中

正如我所说，它有效，但我当然不想有任何错误.

干杯，多米尼克

解决方案

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

<NavItem eventKey={ 2 } data-active-city={activeCity} href="/shanghai">{activeCity}</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

解决方案

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>

这篇关于将道具传递给 NavItem 的正确方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！