javascript - 使用功能组件时出现未定义的行为？

Question

我正在尝试使用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>
);

以上代码不显示导航栏。

在网页上，我只能在导航栏中看到正在加载...，而没有导航项，为什么会这样？ (查看截图)

我想显示与此类似的内容:(查看下面的屏幕截图)

Answer 1

您的错误是由一些混淆的 Prop 名称引起的。在最终的工作示例中，Heading 组件被删除。它所做的只是包装 NavDropdown 并将 props 传递给它。问题是 Heading 没有获得正确的 props - 它期望 links 和 heading 但只获得 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你可以找到我在其中尝试代码的沙箱。