使用StaticQuery创建含子菜单的Gatsby动态导航渲染为空求助

直接导致渲染为空的核心问题 #

你定义的menuLinks是可执行函数，在Navigation组件的render方法中直接写{menuLinks}没有调用函数，不会返回任何可渲染内容，将其修改为{menuLinks()}即可解决空ul问题。

其他需要同步修正的问题 #

• React中标识样式类需要使用className属性，代码中所有的class都要替换为className
• 按React Bootstrap的组件规范，导航项需要嵌套在<Nav>组件下，不需要额外声明原生ul标签
• 子菜单的跳转应该复用Gatsby的<Link>组件，避免原生a标签触发整页刷新
• <NavDropdown>必须指定title属性才会正常渲染下拉触发按钮
• <NavDropdown.Item>的跳转属性写法错误，需要用as指定渲染为Link组件，to指定跳转路径

修正后可直接运行的代码 #

import React from "react"
import { graphql, StaticQuery, Link } from "gatsby"
import Nav from "react-bootstrap/Nav"
import Navbar from "react-bootstrap/Navbar"
import NavDropdown from "react-bootstrap/NavDropdown"

function MenuLinks() {
  return (
    <StaticQuery
      query={graphql`
      query menuItems {
        site {
          siteMetadata {
            MenuLinks {
              link
              title
              subMenu {
                link
                title
              }
            }
          }
        }
      }
      `}
      render={data => (
        <Nav className="me-auto">
          {data.site.siteMetadata.MenuLinks.map((path) => {
            if (path.subMenu && path.subMenu.length > 0) {
              return (
                <NavDropdown title={path.title} key={path.title} className="sub-items responsive-navbar-nav">
                  {path.subMenu.map((subpath) => (
                    <NavDropdown.Item as={Link} to={subpath.link} key={subpath.title}>
                      {subpath.title}
                    </NavDropdown.Item>
                  ))}
                </NavDropdown>
              )
            }
            return (
              <Nav.Link as={Link} to={path.link} key={path.title}>
                {path.title}
              </Nav.Link>
            )
          })}
        </Nav>
      )}
    />
  )
}


class Navigation extends React.Component {
  render() {
    return (
      <Navbar collapseOnSelect expand="md" className="site-navigation">
        <Navbar.Brand as={Link} to="/" className="logo">Metsän Otus</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <MenuLinks />
        </Navbar.Collapse>
      </Navbar >
    )
  }
}

export default Navigation

内容的提问来源于stack exchange，提问作者VarangianVenture