反应中的程序导航菜单。如何使用逻辑语句显示html？答案

【问题标题】：program nav menu in react. How do I use logical statements to display html?反应中的程序导航菜单。如何使用逻辑语句显示html？
【发布时间】：2020-02-28 18:52:32
【问题描述】：

我正在使用 gatsby.js 创建一个站点并使用 graphql 为菜单提取数据。菜单数据工作正常，但是当我尝试添加具有逻辑条件的 submemu 时，它会输出 html 而不是渲染它。因此，它没有显示无序的子菜单列表，而是在我的网站上输出 <ul> 和 </ul>。（列表项和主要 ul 工作正常）

这是我的菜单组件代码：

const WPMenu = () => (
  <StaticQuery
    query ={ graphql`
    {
      wordpressMenusMenusItems(name: {eq: "Main Menu"}) {
        name
        items {
          slug
          title
          child_items {
            slug
            title
          }
        }
      }
    }`
    }
    render = { data => (
      <nav role="navigation">
        <ul>
          {data.wordpressMenusMenusItems.items.map(item => (
            <li key={item.title}>
              {item.child_items ? <Link aria-haspopup="true" to={`/${item.slug}`}>{item.title}</Link> : <Link to={`/${item.slug}`}>{item.title}</Link>}
              {item.child_items ? '<ul>' : "" } //this line is not working
              {item.child_items && item.child_items.map ( child => 
                  <li key={child.title}><Link to={`/${child.slug}`} >{child.title}</Link></li>
              )}
              {item.child_items ? '</ul>' : "" }  //this line is not working
            </li>
          ))}
        </ul>
      </nav>
    )}
  />
);

它的两条注释行{item.child_items ? '<ul>' : "" } //this line is not working 这给我带来了问题。

我试过这个：{item.child_items ? "<ul>" : "" }

并用代码刻度替换引号：

{item.child_items ? `<ul>` : "" }

我是 js 新手，所以很可能我遗漏了一些东西，但它为什么将它解释为代码？

【问题讨论】：

标签： reactjs gatsby nav

【解决方案1】：

问题是 item.child_items 如果是空数组[] 则为真，因为它正在检查它的引用是否存在；您可以使用item.child_items.length > 0 作为条件或简单地使用item.child_items.lengthsince 0 等于 js 中的 false 0 == false //true

{item.child_items.length && '<ul>'}

或

{item.child_items.length > 0 ? '<ul>' : ''}

查看 sn-p 了解更多信息：

const obj = { items : [] }

//even though it is empty it will give you true;
console.log( Boolean(obj.items) )
// not not something is boolean equivilant of that thing
console.log( !!obj.items )

//workaround? using length
//since 0 == false
console.log( "how about length?", Boolean(obj.items.length))

警告：如果 item.child_items 没有长度属性，则该行将引发异常（例如 item.child_items 为 undefined 或 null）

【讨论】：