Gatsby JS 元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义

Question

有人能帮助我吗。 我正在使用一个使用旧版本反应的盖茨比模板。 我正在使用这个导航栏组件，它适用于原始模板。 现在我正在尝试在我的项目中使用它，但是我一直遇到这个问题，我是 React 的新手，有人可以帮助我，甚至帮助我重构这个组件以使其更新到今天的 React 版本。 请提前谢谢你

这是我的导航栏组件

import React, { Component } from "react"
import AnchorLink from "react-anchor-link-smooth-scroll"
import Scrollspy from "react-scrollspy"
import { Container } from "@components/global"
import {
  Nav,
  NavItem,
  Brand,
  StyledContainer,
  NavListWrapper,
  MobileMenu,
  Mobile,
} from "./style"

import { ReactComponent as MenuIcon } from "@static/icons/menu.svg"

const NAV_ITEMS = ["About", "Brands", "Team", "FAQ"]

class Navbar extends Component {
  state = {
    mobileMenuOpen: false,
  }

  toggleMobileMenu = () => {
    this.setState(prevState => ({ mobileMenuOpen: !prevState.mobileMenuOpen }))
  }

  closeMobileMenu = () => {
    if (this.state.mobileMenuOpen) {
      this.setState({ mobileMenuOpen: false })
    }
  }

  getNavAnchorLink = item => (
    <AnchorLink href={`#${item.toLowerCase()}`} onClick={this.closeMobileMenu}>
      {item}
    </AnchorLink>
  )

  getNavList = ({ mobile = false }) => (
    <NavListWrapper mobile={mobile}>
      <Scrollspy
        items={NAV_ITEMS.map(item => item.toLowerCase())}
        currentClassName="active"
        mobile={mobile}
        offset={-64}
      >
        {NAV_ITEMS.map(navItem => (
          <NavItem key={navItem}>{this.getNavAnchorLink(navItem)}</NavItem>
        ))}
      </Scrollspy>
    </NavListWrapper>
  )

  render() {
    const { mobileMenuOpen } = this.state

    return (
      <Nav {...this.props}>
        <StyledContainer>
          <Brand>Absurd</Brand>
          <Mobile>
            <button onClick={this.toggleMobileMenu} style={{ color: "black" }}>
              <MenuIcon />
            </button>
          </Mobile>

          <Mobile hide>{this.getNavList({})}</Mobile>
        </StyledContainer>
        <Mobile>
          {mobileMenuOpen && (
            <MobileMenu>
              <Container>{this.getNavList({ mobile: true })}</Container>
            </MobileMenu>
          )}
        </Mobile>
      </Nav>
    )
  }
}

export default Navbar

这是我的导航栏 index.js

export { default } from "./Navbar"

这就是我使用导航栏组件的地方

import React from "react"

import Layout from "@common/layout"
import Navbar from "@common/Navbar"

import Header from "@sections/Header"
import About from "@sections/About"
import Team from "@sections/Team"
import Faq from "@sections/Faq"
import Footer from "@sections/Footer"

const IndexPage = () => (
  <Layout>
    <Navbar />
    <Header />
    <About />
    <Team />
    <Faq />
    <Footer />
  </Layout>
)

export default IndexPage

出于某种原因，我收到此错误：浏览器中显示的错误

Answer 1

React 组件必须大写，否则由标记标签解释。 在您的情况下，我认为您可能想要使用类似于：

export Navbar from "./Navbar" 

或者，您可以使用：

export { default as Navbar } from "./Navbar"

对于更简洁的方法。