Question

我正在尝试使用JSON数据填充导航栏项，即导航列表。我正在尝试映射数据并显示下拉导航项。

下拉导航的示例代码：

 <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

现在，我正在尝试创建一个函数shownavlist()，该函数可动态填充导航栏中的数据。

我的代码：

function shownavlist(allnavitems){

      const items = allnavitems.map( h => {
        return(
            h.links.map( display => {
              return(

                <a href="#" class="dropdown-toggle navbar-link" data-toggle="dropdown">{h.heading}<span class="caret"></span></a>
                <ul class="dropdown-menu {{getTheme slug}}" role="menu">
                  <li><a class="navbar-link notAllowed" href="">{display.heading}</a>
                  </li>
                </ul>

              )
            })  
         )
      })

  }

<div class="container-fluid ">
              <div class="row">
              <div class="container">
                 <ul class="nav navbar-nav">

                      <li class="dropdown">

                        {shownavlist(allnavitems)}

                      </li>
                 </ul>
              </div>
              </div>
          </div>

我收到未定义地图的错误。如何动态填充导航栏内容？

JSON数据：下面的屏幕快照（控制台日志）为console.log(allnavitems)数据。

Answer 1

最初的问题是，您没有向{shownavlist()}传递任何值，因为allnavitems函数中未定义shownavlist。

另一个问题是，您没有从shownavlist函数返回任何内容，默认情况下该函数将返回undefined。

使用className代替class的{{1}}。

您需要返回CSS数组（它将包含所有ui元素）。像这样：

items

更新：

function shownavlist(allnavitems){
  const items = allnavitems.map( h => {
    return(
        h.links.map( display => {
          return(

            <a href="#" className="dropdown-toggle navbar-link" data-toggle="dropdown">{h.heading}<span className="caret"></span></a>
            <ul className="dropdown-menu {{getTheme slug}}" role="menu">
              <li><a className="navbar-link notAllowed" href="">{display.heading}</a>
              </li>
            </ul>

          )
        })  
     )
  })

  return items;       // <==== added this line

}

还添加了键。

如何使用reactjs动态填充html内容？

1 个答案: