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

Question

我正在使用gatsby.js制作网站，并使用graphql提取菜单数据。菜单数据工作正常，但是当我尝试添加具有逻辑条件的子元素时，它会输出html而不是呈现它。因此，它不显示无序子菜单列表，而是在我的站点上输出<ul>和</ul>。 （列表项和main 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还是陌生的，所以可能我缺少一些东西，但是为什么将其解释为代码？

Answer 1

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

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

或

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

检查代码段以获取更多信息：

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不具有length属性，则该行将引发异常（例如item.child_items为undefined或null）