Gatsby JS 元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义

时间:2021-04-05 11:25:42

标签: reactjs gatsby

有人可以帮我吗?我正在使用一个使用旧版本 react 的 Gatsby 模板。我正在使用这个导航栏组件,它适用于原始模板。现在我正在尝试在我的项目中使用它,但是我一直遇到这个问题,我是 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

出于某种原因,我收到此错误: Error shown in Browser

1 个答案:

答案 0 :(得分:0)

React 组件必须大写,否则会被标记标签解释。在您的情况下,我认为您可能想要使用类似于以下内容的内容:

let options = {
  root: null, //--> viewport if it is null
  rootMargin: '0px',
  threshold: 1.0
}

const callback = function(entries, observer) {
  entries.forEach(entry => {
    let ersparnis = 4600;
    const inv = setInterval(function() {
      if (ersparnis < 4800)
        entry.target.innerHTML = ++ersparnis;
      else
        clearInterval(inv);
    }, 500 / 100);
  });
};

let observer = new IntersectionObserver(callback, options);

const target = document.querySelector('#counter_ersparnis');
observer.observe(target);

或者,您可以使用:

export Navbar from "./Navbar" 

更简洁的方法。