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

Posted 2023-03-08

【中文标题】使用 StaticQuery 创建动态导航菜单（包括子菜单！）

【英文标题】：Creating a dynamic Navigation menu ( submenu included!) with StaticQuery

【发布时间】：2021-08-02 04:28:29

【问题描述】：

我正在尝试动态呈现我的导航菜单。不幸的是，我得到的只是一个空字段，即使我可以在我的 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

【问题讨论】：

不，问题不存在。问题是 map 函数返回 null/nothing。

【参考方案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 这是一个虚假值，适用于这个用例。

【讨论】：

哦，哇，我所需要的只是调用 menuLinks() ......谢谢你也清理了地图功能。这个有效，我现在可以关闭它了。