Reactjs 零状态盖茨比

我遇到的问题是，我在组件中获得空状态，而导航菜单中的滚动不起作用。我假设问题出在Scrollto组件中，但仍然不知道如何解决它。它是一个导航列表，应该从节列表中获取数据，并在单击所选节后平滑滚动。 如果有更好的方法来实现我的代码，我会很高兴听到

导航菜单组件

import React, { useState } from "react"
import scrollTo from "gatsby-plugin-smoothscroll"
import Scrollspy from "react-scrollspy"
import { useSiteMetadata } from "../hooks/use-site-metadata"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faBars } from "@fortawesome/free-solid-svg-icons"

export default function () {
  const [isVisible, setVisibility] = useState(false)

  const { menuItems } = useSiteMetadata()

  let showStyle = null
  if (isVisible) {
    showStyle = { transform: "scaleY(1)" }
  } else {
    showStyle = null
  }

  return (
    <nav className="nav">
      <button
        className="btn-tog"
        id="toggle-btn"
        href="/#"
        title="Menu"
        onClick={() => setVisibility(!isVisible)}
      >
        <FontAwesomeIcon icon={faBars} />
      </button>

      <Scrollspy
        className=" nav-ul navList list flex"
        style={showStyle}
        items={menuItems.map(a => a.path)}
        currentClassName="current"
        offset={-100}
      >
        {menuItems.map((value, index) => {
          return (
            <li className="mr3" key={index}>
              <button
                onClick={() => 
                  {
                  scrollTo("#" + value.path)
                  setVisibility(0)
                }}
              >
                {value.label}
              </button>
            </li>
          )
        })}
      </Scrollspy>
    </nav>
  )
}

存储数据

module.exports = {
  siteMetadata: {  
    /* Choose and arrange the sections to be displayed on the landing page */
    sections: [`hero`, `about`, `mappingItems`, `contact`],

    /* Configure the navigation menu */
    menuItems: [
      { path: "hero", label: "Home" },
      { path: "about", label: "About" },
      { path: "mappingItems", label: "MappingItems" },
      { path: "contact", label: "Contact" },
    ],

index.js

import React from "react"
import Layout from "../components/layout"
import Hero from "./Hero"
import About from "./about"
import Contact from "./contact"
import MappingItems from "./mappingItems"




import { useSiteMetadata } from "../hooks/use-site-metadata"

export default () => {
  const { sections } = useSiteMetadata()
  const availableSections = {
    hero: Hero,
    about: About,
    mappingItems: MappingItems,
    contact: Contact,
  }

  return (
    <>
      <Layout>
        {sections.map(section => {
          let Tagname = availableSections[section]
          return <Tagname />
        })}
      </Layout>
    </>
  )
}

从“React”导入React
从“./组件/布局”导入布局
从“/Hero”导入英雄
从“/About”导入关于
从“/Contact”导入联系人
从“/MappingItems”导入MappingItems
从“./hooks/use site metadata”导入{useSiteMetadata}
导出默认值（）=>{
const{sections}=useSiteMetadata（）
const availableSections={
英雄：英雄，
关于:关于,，
mappingItems:mappingItems，
联系人：联系人，
}
返回(
{sections.map（section=>{
让Tagname=availableSections[节]
返回
})}
)
}

---

问题在于，它应该位于具有相同id的availableSections包装部分中的节（组件）中。

很难回答您的问题（无法通过复制粘贴代码测试页面是否滚动）。还有与

CSS

@ezrasitontnx相关的错误截图，以供回复。-这里有一个启动器，我用同样的代码得到了制作导航的逻辑。没有css，它仍然在工作，所以它不是css。

import React from "react"
import Layout from "../components/layout"
import Hero from "./Hero"
import About from "./about"
import Contact from "./contact"
import MappingItems from "./mappingItems"




import { useSiteMetadata } from "../hooks/use-site-metadata"

export default () => {
  const { sections } = useSiteMetadata()
  const availableSections = {
    hero: Hero,
    about: About,
    mappingItems: MappingItems,
    contact: Contact,
  }

  return (
    <>
      <Layout>
        {sections.map(section => {
          let Tagname = availableSections[section]
          return <Tagname />
        })}
      </Layout>
    </>
  )
}