使用 StaticQuery 创建动态导航菜单（包括子菜单！）

Question

我正在尝试动态呈现我的导航菜单。不幸的是，我得到的只是一个空字段，即使我可以在我的 graphQL 上获得正确的数据。这是我第一次公开请求帮助。我希望这第一篇文章提供了所有必要的信息，以便更多有才华的开发人员可以帮助我解决我的问题。 :b

我的网站已经上线：https://metsanotus.netlify.app/，你可以看到里面有 {menuLinks} 的 ul 是空的。

这是我的 graphQl 结构：

query menuItems {
        site {
          siteMetadata {
            MenuLinks {
              link
              title
              subMenu {
                link
                title
              }
            }
          }
        }
      }

我确实得到了我想要检索的特定数据。：

{
  "data": {
    "site": {
      "siteMetadata": {
        "MenuLinks": [
          {
            "link": "/",
            "title": "Etusivu",
            "subMenu": null
          },
          {
            "link": "/metsan-otus",
            "title": "Minusta",
            "subMenu": null
          },
          {
            "link": "/vlogi",
            "title": "Vlogi",
            "subMenu": [
              {
                "link": "/vlogi/kirjakerho/",
                "title": "Kirjakerho"
              },
              {
                "link": "/vlogi/elamankoulu/",
                "title": "Elämänkoulu"
              },
              {
                "link": "/vlogi/saarnakirja/",
                "title": "Saarnakirja"
              },
              {
                "link": "/vlogi/hunajapurkki/",
                "title": "Hunajapurkki"
              },
              {
                "link": "/vlogi/pelihalli/",
                "title": "Pelihalli"
              },
              {
                "link": "/vlogi/karhuteatteri/",
                "title": "Karhuteatteri"
              }
            ]
          },
          {
            "link": "/yhteydenotto",
            "title": "Ota yhteyttä",
            "subMenu": null
          }
        ]
      }
    }
  },
  "extensions": {}
}

^^ 此数据设置在我的 gatsby-config.js 上，位于 MenuLinks 对象下的 siteMetaData 对象内。

这是我尝试映射菜单的两次尝试： https://gist.github.com/otsolap/9bf186db6793bdcf721d520a45336e09 https://gist.github.com/otsolap/e9935bf4de44c17ab3f91e352229db81

这里是第一个要点的代码，只是为了展示一个例子：

`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 => (
        <ul>
          {data.site.siteMetadata.MenuLinks.map((path) => (
            <Nav.Link as="li" key={path.title}>
              <Link
                to={path.link}
              >
                {path.title}
              </Link>
              {path.subMenu && path.subMenu.length > 0 ? (
                <NavDropdown class="sub-items responsive-navbar-nav">
                  {path.subMenu.map((subpath) => (
                    <NavDropdown.Item a href={subpath.link}>
                      {subpath.title}
                    </NavDropdown.Item>
                  ))}
                </NavDropdown>
              ) : null}
            </Nav.Link>))
          }</ul>
      )}
    />
  )
}


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


export default Navigation`

我认为我非常接近正确完成这项工作，但缺少一小段关键代码.... 有什么好心的小伙子可以帮助初级开发人员吗？ :b

Answer 1

我相信您正在寻找类似的东西：

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 => (
        <ul>
          {data.site.siteMetadata.MenuLinks.map((path) => (
            <Nav.Link as='li' key={path.title}>
              <Link to={path.link}>
                {path.title}
              </Link>
              {path.subMenu &&  (
                <NavDropdown class='sub-items responsive-navbar-nav'>
                  {path.subMenu.map((subpath) => (
                    <NavDropdown.Item a href={subpath.link}>
                      {subpath.title}
                    </NavDropdown.Item>
                  ))}
                </NavDropdown>
              )}
            </Nav.Link>))
          }</ul>
      )}
    />
  );
}

class Navigation extends React.Component {
  render () {
    return (
      <Navbar collapseOnSelect expand='md' className='site-navigation'>
        <Navbar.Brand class='logo' href='/'>Metsän Otus</Navbar.Brand>
        <Navbar.Toggle aria-controls='responsive-navbar-nav' />
        <Navbar.Collapse id='responsive-navbar-nav'>
          <ul>
            {menuLinks()}
          </ul>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default Navigation;

注意函数调用 ({menuLinks()})（你说的关键小部分）并删除了一些冗余条件，如 path.subMenu && path.subMenu.length > 0，因为 path.subMenu 这是一个虚假值，适用于这个用例。