检查 JSON 是否在返回中多次包含子元素

Question

我正在尝试在循环遍历 JSON 子元素之前检查它们的长度（或者是否存在）。我的例子有一个注释：{const itHasChildren = item.child_items.length;}我上面得到的错误是src/Components/HeaderComponent/header.js 第 60:29 行：“childItem”未定义 no-undef搜索关键字以了解有关每个错误的更多信息。 return (    <nav >          <ul className="navbar-nav">        {menus &&          menus.map((item) => (                        <li className="nav-item active" key={item.ID}>                                <Link >{item.title} </Link>     // I NEED TO CHECK THE LENGTH  OR IF child_items EXISTS      //  HERE SO I CAN DECIDE WHETHER TO DISPLAY THIS DIV OR NOT              {item.child_items.map((childItem).length)}              <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" >              {item.child_items &&                item.child_items.map((childItem) => (                                  <Link >{childItem.title} </Link>                                          ))}                  </div>            </li>                     ))}      </ul> </nav>  );

Answer 1

我已经清理了你的代码，所以它应该可以工作。只是地图内的第一个元素需要，key根据您的数据，它可能是数组中的索引位置

  return (

    <nav className="navbar navbar-expand-lg navbar-light bg-light">

      <button

        className="navbar-toggler"

        type="button"

        data-toggle="collapse"

        data-target="#navbarNavDropdown"

        aria-controls="navbarNavDropdown"

        aria-expanded="false"

        aria-label="Toggle navigation"

      >

        <span className="navbar-toggler-icon"></span>

      </button>

      <div className="collapse navbar-collapse" id="navbarNavDropdown">

        <ul className="navbar-nav">

          {(menus || []).map((item, ix) => (

            <li key={ix} className="nav-item active">

              <Link

                className="nav-link"

                to={{

                  pathname: item.slug,

                  state: {

                    pageId: item.slug

                  }

                }}

              >

                {item.title}

              </Link>

              {(item.child_items || []).map((childItem, ix) => (

                <div key={ix} className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                  <Link

                    className="dropdown-item"

                    to={{

                      pathname: childItem.slug,

                      state: {

                        pageId: childItem.slug

                      }

                    }}

                  >

                    {childItem.title}

                  </Link>

                </div>

              ))}

            </li>

          ))}

        </ul>

      </div>

    </nav>

  );

Answer 2

这是我正在寻找的语法和条件

<li 
            className={
                item.child_items
                  ? "nav-item dropdown"
                  : "nav-item  "
              }