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

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

使用功能组件时出现不确定的行为吗？

1 个答案: