使用 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 object 下的 siteMetaData object 中。

These are my two attempts at trying to map my menu: 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;

注意 function 調用（ {menuLinks()} ）（你說的關鍵小部分）並刪除了一些冗余條件，如path.subMenu && path.subMenu.length > 0 ，因為path.subMenu它是一個虛假值並且可以工作對於這個用例。