Получить подменю WordPress в Gatsby JS - PullRequest
Новая
       32

Получить подменю WordPress в Gatsby JS

0 голосов
/ 28 апреля 2018

Я возился с Gatsby JS, используя WP в качестве бэкэнда, и пока все хорошо. Теперь я пытался открыть меню, которое для основных пунктов меню работает так, как ожидалось. То, что я не могу действительно обернуть мою голову, - то, как втянуть подменю.

Единственной связанной вещью, которую я нашел, была 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}

но просто не могу заставить его работать: / Любые идеи или указатели будут высоко оценены!

1 Ответ

0 голосов
/ 28 апреля 2018

Я только что проверил это, и ваша логика звучит все, что вам нужно, это еще один цикл для отображения подэлементов. Так что в вашем 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)

Это проверит, есть ли в вашем пункте меню подэлементы, и если это так, то отобразит их и выполнит итерацию по ним.

Я надеюсь, что это работает для вас, я проверил, и это работает.

...