代码之家 › 专栏 › 技术社区 › stone rock

在使用功能组件时获得未定义的行为?

reactjs javascript

stone rock · 技术社区 · 6 年前

我正在尝试使用reactjs填充html内容,即导航下拉菜单。我变得行为不明,我无法显示下拉菜单导航栏。

我的代码:

const Header = ({allnavitems, loading, SiteConfig, user}) => {


  if (loading) {
      return <div><p>Loading...</p></div>
  }

  console.log(allnavitems)
  if( allnavitems.links.length !== 0){
  return(

        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <a className="navbar-brand" href="#">Crikit</a>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              {allnavitems.map((allnavitems) => <Heading heading={allnavitems} />)}
            </ul>
            <form className="form-inline my-2 my-lg-0">
              <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
                <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
  )

}

};

const Heading = ({allnavitems}) => <NavDropdown links={allnavitems.links} heading={allnavitems.heading}/>

const NavDropdown = ({title, links}) => (
  <li className="nav-item dropdown">
    <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      {title}
    </a>
    <div className="dropdown-menu" aria-labelledby="navbarDropdown">
      {links.map(({link='#', heading}) => <NavLink link={link} heading={heading}/>)}
    </div>
</li>
);

const NavLink = ({link='#', heading}) => (
  <a className="dropdown-item" href={link}>{heading}</a>
);

上面的代码不显示导航栏。

在网页上我只能看到加载。。。在导航栏中没有导航项为什么?(查看屏幕截图)

我想展示类似的东西:(查看下面的截图)

1 回复 | 直到 6 年前

bamse 6 年前

你的错误是由一些混淆的道具名称引起的。在最后一个工作示例中 Heading 组件已移除。它所做的只是包装 NavDropdown 把道具传给它。问题是 航向 没有得到正确的道具-这是预料之中的 links 和 heading 但只得到了 标题 .

我相信这是有效的代码版本:

const Header = ({allnavitems, loading, SiteConfig, user}) => {
  

  if (loading) {
      return <div><p>Loading...</p></div>
  }

//  console.log(allnavitems)
  let navitems = allnavitems.filter( (value) => value.links.length !==0 )
  console.log(navitems)

  console.log(navitems[0].links)

  return(
      <header>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <a className="navbar-brand" href="#">Crikit</a>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
    
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              {navitems.map((navitems) => <NavDropdown heading={navitems.heading} links={navitems.links}/>)}
            </ul>
            <form className="form-inline my-2 my-lg-0">
              <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
                <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </header>
  )

};


//const Heading = (navitems) => <NavDropdown links={navitems.links} heading={navitems.heading}/>


const NavDropdown = ({heading, links}) => (
  <li className="nav-item dropdown">
    <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      {heading}
    </a>
    <div className="dropdown-menu" aria-labelledby="navbarDropdown">
      {links.map(({link='#', heading}) => <NavLink link={link} heading={heading}/>)}
    </div>
</li>
);

const NavLink = ({link='#', heading}) => (
  <a className="dropdown-item" href={link}>{heading}</a>
);

Here 你可以找到我试过代码的沙盒。