创建动态导航菜单(包含子菜单!)使用StaticQuery:
动态导航菜单是一个常见的网站功能,它可以根据网站的需求和内容动态生成导航菜单,并且支持子菜单的展示。在前端开发中,可以使用StaticQuery来实现这个功能。
StaticQuery是Gatsby框架提供的一个静态查询组件,它可以在组件中执行GraphQL查询并获取数据。通过结合React组件的渲染能力,我们可以利用StaticQuery来动态生成导航菜单。
以下是一个示例代码,展示如何使用StaticQuery来创建动态导航菜单:
import React from "react"
import { StaticQuery, graphql } from "gatsby"
const NavMenu = () => (
<StaticQuery
query={graphql`
query {
allMenuItemsJson {
edges {
node {
id
title
link
subMenu {
id
title
link
}
}
}
}
}
`}
render={data => (
<nav>
<ul>
{data.allMenuItemsJson.edges.map(({ node }) => (
<li key={node.id}>
<a href={node.link}>{node.title}</a>
{node.subMenu && (
<ul>
{node.subMenu.map(subItem => (
<li key={subItem.id}>
<a href={subItem.link}>{subItem.title}</a>
</li>
))}
</ul>
)}
</li>
))}
</ul>
</nav>
)}
/>
)
export default NavMenu
import React from "react"
import NavMenu from "./NavMenu"
const HomePage = () => (
<div>
<h1>Welcome to My Website</h1>
<NavMenu />
{/* 其他页面内容 */}
</div>
)
export default HomePage
在上述代码中,我们使用StaticQuery来执行GraphQL查询,获取所有的菜单项数据。然后,我们通过map函数遍历数据,动态生成导航菜单的HTML结构。如果菜单项有子菜单,我们也会递归地生成子菜单的HTML结构。
这样,当你在页面中使用NavMenu组件时,它会根据查询到的数据动态生成导航菜单,并支持子菜单的展示。
推荐的腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅供参考,具体的产品选择应根据实际需求和项目要求进行评估和决策。
领取专属 10元无门槛券
手把手带您无忧上云