无法将 React 组件导入 Gatsby 入门组件

Question

Gatsby 和 React 的新手。我正在尝试导入此响应式导航栏 React component into this Gatsby starter:

我创建了一个 MenuBar，而不是 starter 中的 Menu 组件，我从另一个名为 Layout 的组件调用它。

顶部的代码有效（从启动器稍微修改），不使用外部组件。

import React from 'react'
import { Link } from 'gatsby'
import styled from '@emotion/styled'
import { useSiteMetadata } from '../hooks/use-site-metadata'

const Header = styled.header`
  background: ${props => props.theme.colors.primary};
  width: 100%;
  padding: 1.5em 0;
`
const Nav = styled.nav`
  width: 100%;
  max-width: ${props => props.theme.sizes.maxWidth};
  margin: 0 auto;
  padding: 0 1.5em;

  ul {
    display: flex;
    justify-content: space-between;
  }

  li {
    display: inline-block;
    margin-left: 1em;
    h2 {
      font-size: 1.2em;
      @media (max-width: ${props => props.theme.responsive.small}) {
        font-size: 1em;
      }
    }
    &:first-of-type {
      position: relative;
      margin: 0;
      flex-basis: 100%;
      h2 {
        font-size: 1.5em;
        @media (max-width: ${props => props.theme.responsive.small}) {
          font-size: 1em;
        }
      }
    }
  }

  a {
    text-decoration: none;
    color: white;
    transition: all 0.2s;
    border-bottom: 2px solid ${props => props.theme.colors.text};
    &:hover {
      color: #e8e6e6;
    }
  }
`

const activeLinkStyle = {
  color: 'white',
}

const Menu = () => {
  const { menuLinks } = useSiteMetadata()
  return (
    <Header>
      <Nav>
        <ul>
          {menuLinks.map(link => (
            <li key={link.name}>
              <Link to={link.slug} activeStyle={activeLinkStyle}>
                <h2>{link.name}</h2>
              </Link>
            </li>
          ))}
        </ul>
      </Nav>
    </Header>
  )
}

export default Menu

但是下面这个（我导入“响应式动画导航栏”的地方不起作用）。我认为这与渲染方法有关。也许我的问题更多关于 Javascript？欢迎任何让它工作的帮助。谢谢！

import React from 'react'
import { Link } from 'gatsby'
import styled from '@emotion/styled'
import { useSiteMetadata } from '../hooks/use-site-metadata'
import ReactNavbar from 'react-responsive-animate-navbar'

class MenuBar extends React.Component {
  render() {
    return (
      <ReactNavbar
        color="rgb(25, 25, 25)"
        logo="https://svgshare.com/i/KHh.svg"
        menu={[
          { name: 'HOME', to: '/' },
          { name: 'ARTICLES', to: '/articles' },
          { name: 'ABOUT ME', to: '/about' },
          { name: 'CONTACT', to: '/contact' },
        ]}
        social={[
          {
            name: 'Linkedin',
            url: 'https://www.linkedin.com/in/nazeh-taha/',
            icon: ['fab', 'linkedin-in'],
          },
          {
            name: 'Facebook',
            url: 'https://www.facebook.com/nazeh200/',
            icon: ['fab', 'facebook-f'],
          },
          {
            name: 'Instagram',
            url: 'https://www.instagram.com/nazeh_taha/',
            icon: ['fab', 'instagram'],
          },
          {
            name: 'Twitter',
            url: 'http://nazehtaha.herokuapp.com/',
            icon: ['fab', 'twitter'],
          },
        ]}
      />
    )
  }
}

export default MenuBar

我得到这个错误：

错误：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。

Check the render method of `MenuBar`.
▶ 21 stack frames were collapsed.
(anonymous function)
/home/neto/Documents/gatsbyto/elindustrial/.cache/app.js:165
  162 |   dismissLoadingIndicator()
  163 | }
  164 | 
> 165 | renderer(<Root />, rootElement, () => {
  166 |   apiRunner(`onInitialClientRender`)
  167 | 
  168 |   // Render query on demand overlay

编辑： 谢谢 Fer运行！实际上，我从一开始就在两个文件的顶部包含了来自 'react' 的 React，但它们没有出现在我的问题中，因为我弄乱了格式:)。我阅读了有关命名导出与默认导出的内容。我尝试将其保留为 class，并更改为功能组件，但在这两种情况下我都得到了完全相同的错误。

我还尝试使用以下方法从布局导入：

import MenuBar from '../components/MenuBar'

或

import {MenuBar} from '../components/MenuBar'

但是我一直因为上面完全相同的错误而悲惨地失败。我按照Gatsby guide安装了组件，我不确定我做错了什么。

编辑 2： 按照建议将 ReactNavBar 包裹在一个空标签中，Fer运行。我正在阅读有关功能组件的信息，但仍然不走运:-S。这是代码：

import React from 'react'
import ReactNavbar from 'react-responsive-animate-navbar'

const MenuBar = props => {
  return (
    <>
      <ReactNavbar
        color="rgb(25, 25, 25)"
        logo="https://svgshare.com/i/KHh.svg"
        menu={[
          { name: 'HOME', to: '/' },
          { name: 'ARTICLES', to: '/articles' },
          { name: 'ABOUT ME', to: '/about' },
          { name: 'CONTACT', to: '/contact' },
        ]}
        social={[
          {
            name: 'Linkedin',
            url: 'https://www.linkedin.com/in/nazeh-taha/',
            icon: ['fab', 'linkedin-in'],
          },
          {
            name: 'Facebook',
            url: 'https://www.facebook.com/nazeh200/',
            icon: ['fab', 'facebook-f'],
          },
          {
            name: 'Instagram',
            url: 'https://www.instagram.com/nazeh_taha/',
            icon: ['fab', 'instagram'],
          },
          {
            name: 'Twitter',
            url: 'http://nazehtaha.herokuapp.com/',
            icon: ['fab', 'twitter'],
          },
        ]}
      />
    </>
  )
}

export default MenuBar

编辑 3 包括布局代码。我运行 gastby clean 但仍然有同样的错误。我在构建时注意到警告，这是警告：

warn "export 'default' (imported as 'ReactNavbar') was not found in
'react-responsive-animate-navbar'

import React, { useEffect } from 'react'
import styled from '@emotion/styled'
import { Global } from '@emotion/core'
// import Menu from '../components/Menu'
import MenuBar from '../components/MenuBar'
import Footer from '../components/Footer'
import { globalStyles } from '../styles/globalStyles.js'

const Root = styled.div``

const Skip = styled.a`
  padding: 0 1rem;
  line-height: 60px;
  background: #2867cf;
  color: white;
  z-index: 101;
  position: fixed;
  top: -100%;
  &:hover {
    text-decoration: underline;
  }
  &:focus,
  &:active,
  &:hover {
    top: 0;
  }
`

const Layout = props => {
  function handleFirstTab(e) {
    if (e.keyCode === 9) {
      document.body.classList.add('user-is-tabbing')
    }
  }
  useEffect(() => window.addEventListener('keydown', handleFirstTab), [])

  return (
    <Root className="siteRoot">
      <div className="siteContent">
        <Skip href="#main" id="skip-navigation">
          Skip to content
        </Skip>
        <MenuBar />
        <div id="main">{props.children}</div>
      </div>
      <Footer />
      <Global styles={globalStyles} />
    </Root>
  )
}

export default Layout

Answer 1

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

在99%的情况下，此问题与import/export方法有关，如果某些组件默认导出但按命名导入（反之亦然），则会导致提示问题。

在您的情况下，您返回的是基于 class 的组件，但您的问题并非来自于此。你错过了 React 和 Component 的输入，因为你正在扩展它。以下依赖示例：

import { Link } from 'gatsby'
import styled from '@emotion/styled'
import { useSiteMetadata } from '../hooks/use-site-metadata'
import { ReactNavbar } from "react-responsive-animate-navbar";
import React, { Component } from 'react';

class MenuBar extends React.Component {
  render() {
    return (
      <ReactNavbar
        color="rgb(25, 25, 25)"
        logo="https://svgshare.com/i/KHh.svg"
        menu={[
          { name: 'HOME', to: '/' },
          { name: 'ARTICLES', to: '/articles' },
          { name: 'ABOUT ME', to: '/about' },
          { name: 'CONTACT', to: '/contact' },
        ]}
        social={[
          {
            name: 'Linkedin',
            url: 'https://www.linkedin.com/in/nazeh-taha/',
            icon: ['fab', 'linkedin-in'],
          },
          {
            name: 'Facebook',
            url: 'https://www.facebook.com/nazeh200/',
            icon: ['fab', 'facebook-f'],
          },
          {
            name: 'Instagram',
            url: 'https://www.instagram.com/nazeh_taha/',
            icon: ['fab', 'instagram'],
          },
          {
            name: 'Twitter',
            url: 'http://nazehtaha.herokuapp.com/',
            icon: ['fab', 'twitter'],
          },
        ]}
      />
    )
  }
}

export default MenuBar

使用功能组件：

import React from 'react';
import { ReactNavbar } from "react-responsive-animate-navbar";


const MenuBar = (props) => {
  return <>
    <ReactNavbar
      color="rgb(25, 25, 25)"
      logo="https://svgshare.com/i/KHh.svg"
      menu={[
        { name: `HOME`, to: `/` },
        { name: `ARTICLES`, to: `/articles` },
        { name: `ABOUT ME`, to: `/about` },
        { name: `CONTACT`, to: `/contact` }
      ]}
      social={[
        {
          name: `Linkedin`,
          url: `https://www.linkedin.com/in/nazeh-taha/`,
          icon: [`fab`, `linkedin-in`]
        },
        {
          name: `Facebook`,
          url: `https://www.facebook.com/nazeh200/`,
          icon: [`fab`, `facebook-f`]
        },
        {
          name: `Instagram`,
          url: `https://www.instagram.com/nazeh_taha/`,
          icon: [`fab`, `instagram`]
        },
        {
          name: `Twitter`,
          url: `http://nazehtaha.herokuapp.com/`,
          icon: [`fab`, `twitter`]
        }
      ]}
    />
  </>
};

export default MenuBar;

解决方案

深入研究库，似乎模块未按照文档建议的那样默认导出（如 source 中所示），因此需要将其导入为：

import { ReactNavbar } from "react-responsive-animate-navbar";

Answer 2

这里，MenuBar 是一个class组件

因此，您不能在其中导入钩子。

尝试从 MenuBar 组件中删除以下行

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

无法将 React 组件导入 Gatsby 入门组件

Can't import react component into a gatsby starter component

javascript

jsx

reactjs

gatsby

解决方案