Saya mencoba merender menu navigasi saya secara dinamis. Sayangnya yang saya dapatkan hanyalah bidang kosong, meskipun saya bisa mendapatkan data yang benar di graphQL saya. ini adalah pertama kalinya saya secara terbuka meminta bantuan. Saya harap posting pertama ini memberikan semua informasi yang diperlukan sehingga pengembang yang lebih berbakat dapat membantu saya dalam pertanyaan saya. :b

Situs saya aktif di: https://metsanotus.netlify.app/ dan Anda dapat melihat bahwa ul yang memiliki {menuLinks} di dalamnya kosong.

Inilah struktur graphQl saya:

query menuItems {
        site {
          siteMetadata {
            MenuLinks {
              link
              title
              subMenu {
                link
                title
              }
            }
          }
        }
      }

Dan saya mendapatkan data spesifik yang ingin saya ambil.:

{
  "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": {}
}

^^ Data ini diatur pada gatsby-config.js saya di dalam objek siteMetaData saya di bawah objek MenuLinks.

Ini adalah dua upaya saya untuk mencoba memetakan menu saya: https://gist.github.com/otsolap/9bf186db6793bdcf721d520a45336e09 https://gist.github.com/otsolap/e9935bf4de44c17ab3f91e352229db81

Berikut adalah kode dari inti pertama, hanya untuk menunjukkan contoh:

`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`

Saya pikir saya sangat dekat untuk menyelesaikan ini dengan benar tetapi saya kehilangan sepotong kecil kode penting .... Bisakah semacam chap membantu junior dev keluar? :b

2
Kultakämmen 11 Mei 2021, 22:09

1 menjawab

Jawaban Terbaik

Saya yakin Anda sedang mencari sesuatu seperti:

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;

Perhatikan pemanggilan fungsi ({menuLinks()}) (bagian kecil penting yang Anda katakan) dan penghapusan beberapa kondisi yang berlebihan seperti path.subMenu && path.subMenu.length > 0, karena path.subMenu itu adalah nilai palsu dan akan berfungsi untuk penggunaan ini- kasus.

1
Ferran Buireu 12 Mei 2021, 05:17