在 Gatsby JS 中获取 WordPress 子菜单

Question

我正在摆弄使用 WP 作为后端的 Gatsby JS，到目前为止一切顺利。现在我试图拉入主菜单项按预期工作的菜单。我无法真正理解的是如何拉入子菜单。

我发现的唯一相关内容是 https://github.com/gatsbyjs/gatsby/issues/2426，如果我记录数据，它会给我子菜单。只是无法将它们拉入菜单。

这是我在 layouts/index.js 中的查询：

export const query = graphql`
  query LayoutQuery {
    allWordpressWpApiMenusMenusItems {
      edges {
        node {
          name
          count
          items {
            order
            title
            url
            wordpress_children {
              wordpress_id
              title
              url
            }
          }
        }
      }
    }
}
`

这是我的菜单组件：

class MainMenu extends Component {
  render(){

    const data = this.props.menu.allWordpressWpApiMenusMenusItems.edges["0"].node.items
    console.log(data)

    return(
      <div>
      <h1>Menu</h1>
      <ul>
        {data.map((item) =>
          <li key={item.object_slug}>
            <Link to={item.url}>
              {item.title}
            </Link>
          </li>
        )}
      </ul>
      </div>
    )
  }
}

export default MainMenu

我尝试摆弄

的变体

{item.children["0"].wordpress_children.title}

但无法让它工作：/任何想法或指示将不胜感激！

Answer 1

我刚刚对此进行了测试，您的逻辑是合理的，您只需要另一个循环来显示子项。所以在你的 MainMenu.js 中你可以做这样的事情：

class MainMenu extends Component {
render() {

    const data = this.props.menu.allWordpressWpApiMenusMenusItems.edges[0].node.items
    console.log(data)
    return (
        <div>
            <h1>Main Menu</h1>
            <ul>
                {data.map((item) =>
                    <li key={item.object_slug}>
                        <Link to={item.url}>
                            {item.title}
                        </Link>
                        <ul>
                            {item.wordpress_children && item.wordpress_children.map((subitem) =>
                                <li key={item.wordpress_id}>
                                    <Link to={subitem.url}>
                                        {subitem.title}
                                    </Link>
                                </li>
                            )}
                        </ul>
                    </li>
                )}
            </ul>
        </div>
    )
}
}

这一行很重要{item.wordpress_children && item.wordpress_children.map((subitem)

这将检查您的菜单项是否有子项，如果有，它将映射它们并遍历它们。

我希望这对你有用，我测试了它并且它有效。

在 Gatsby JS 中获取 WordPress 子菜单

Get WordPress Submenus in Gatsby JS

wordpress-rest-api

gatsby