在Gatsby JS中获取WordPress子菜单 [英] Get WordPress Submenus in Gatsby JS

问题描述

我正在摆弄Gatsby JS(使用WP作为后端)，到目前为止一切都很好.现在，我试图插入菜单，该菜单对于主菜单项的作用与预期的一样.我不能真正动脑筋的是如何拉入子菜单.

I am fiddling around with Gatsby JS using WP as the backend and so far so good. Now I was trying to pull in the menu which for main menu items works just as expected. What I can't really wrap my head around is how to get the submenus pulled in.

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

The only related thing I found was https://github.com/gatsbyjs/gatsby/issues/2426 which does give me the submenus if I log the data. Just can't get them to be pulled into the menu.

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

Here is my query in 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}

但无法使其正常工作:/任何想法或指示都将不胜感激！

but just can't get it to work:/ Any ideas or pointers would be much appreciated!

推荐答案

我刚刚对此进行了测试，您的逻辑很合理，您需要的是显示子项的另一个循环.因此，在MainMenu.js中，您可以执行以下操作:

I just tested this, and your logic is sound all you need is another loop to display subitems. So in your MainMenu.js you can do something like this:

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((子项目)

这将检查您的菜单项是否包含子项，如果包含子项，则将其映射并遍历它们.

This will check if your menu item has subitems, and if it does it will map them and iterate through them.

我希望这对您有用，我对其进行了测试，并且它可以正常工作.

I hope this works for you, I tested it and it works.

这篇关于在Gatsby JS中获取WordPress子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！