【发布时间】：2023-03-25 14:03:01
【问题描述】：
Gatsby 和 React 的新手。我正在尝试将此响应式导航栏React component 导入this Gatsby starter：
我创建了一个 MenuBar，而不是启动器中的 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
我收到此错误：
错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
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
编辑： 谢谢费兰！实际上，我从一开始就在两个文件的顶部都包含了来自“react”的 React，但它们没有出现在我的问题中，因为我弄乱了格式:)。我阅读了有关命名导出与默认导出的信息。我尝试将它作为一个类保留，并且也更改为功能组件，但在这两种情况下我都得到完全相同的错误。
我也尝试过从 Layout 导入：
import MenuBar from '../components/MenuBar'
或
import {MenuBar} from '../components/MenuBar'
但我一直惨败，上面完全相同的错误。我按照Gatsby guide安装了组件，不知道自己做错了什么。
编辑 2： 按照 Ferran 的建议，将 ReactNavBar 包装在一个空标签中。而且我正在阅读有关功能组件的信息，但仍然没有运气：-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
【问题讨论】：
标签： javascript reactjs jsx gatsby