有人可以帮我吗?我正在使用一个使用旧版本 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
答案 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"
更简洁的方法。