[英]Creating a dynamic Navigation menu ( submenu included!) with StaticQuery
我正在尝试动态呈现我的导航菜单。 不幸的是,我得到的只是一个空字段,即使我可以在我的 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
我相信您正在寻找类似的东西:
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
它是一个虚假值并且可以工作对于这个用例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.