[英]React - Parsing error: Unexpected token, expected “;”
I'm trying to call a method inside resize()
when the screen width is less than or equal to 900, but I get the error Parsing error: Unexpected token, expected ";"当屏幕宽度小于或等于 900 时,我试图在
resize()
中调用一个方法,但出现错误Parsing error: Unexpected token, expected ";" how to fix this problem?如何解决这个问题? https://ibb.co/cX0QxS1 https://ibb.co/bQSj1hq
https://ibb.co/cX0QxS1 https://ibb.co/bQSj1hq
import React, { Fragment } from 'react';
import less from "./css/lesson.module.css";
import "./css/activeLink.css";
import "./css/betaLesson.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Navbar } from "../../../Navbar/Navbar";
import ReactHtmlParser from 'react-html-parser';
import * as Icon from 'react-bootstrap-icons';
import styled from "styled-components";
import { slide as Menu } from 'react-burger-menu'
import { NavbarMobile } from '../../../Navbar/Mobile_Navbar/NavbarMobile';
const NextPage = styled.button`
display: flex;
align-items: center;
font-family: 'Roboto';
font-weight: 500;
letter-spacing: 0.2px;
color: #ff7b77d9;
padding: 9px 22px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font-size: 13px;
border: 1px solid #ff7b77d9;
border-radius: 2px;
`;
export class Lessons extends React.Component {
constructor(props) {
super(props);
this.state = {
indexDescription: 1,
listActiveIndex: 1,
sidebarMobile: true,
menuMobileIsOpen: false,
}
}
componentDidMount() {
window.addEventListener("resize", this.resize.bind(this));
this.resize();
}
resize() {
if (window.innerWidth > 900) {
this.setState({ sidebarMobile: true })
this.setState({ menuMobileIsOpen: false })
} else {
this.setState({ sidebarMobile: false })
}
}
hideMenu() {
this.setState({ sidebarMobile: false })
}
componentWillUnmount() {
window.removeEventListener("resize", this.resize.bind(this));
}
changeDescription(index) {
this.setState({ indexDescription: index, listActiveIndex: index })
}
nextPage() {
// next page
this.setState({ indexDescription: this.state.indexDescription + 1, listActiveIndex: this.state.indexDescription + 1 })
}
prevPage() {
// next page
this.setState({ indexDescription: this.state.indexDescription - 1, listActiveIndex: this.state.indexDescription - 1 })
}
showsidebarMobile = () => {
this.setState({ sidebarMobile: !this.state.sidebarMobile })
}
menuMobileIsOpen = () => {
this.setState({ menuMobileIsOpen: !this.state.menuMobileIsOpen })
}
HideMenuMobileIsOpen = () => {
this.setState({menuMobileIsOpen: false})
}
showSettings(event) {
event.preventDefault();
}
render() {
const listLessons = this.props.lesson.map((item, index) => {
// active link
const className = this.state.listActiveIndex === index ? 'list_active' : null;
return (
<Fragment key={index}>
{item.title && (
<li className={less.courseTitle}>
<div>
<p>{item.title}</p>
</div>
</li>
)}
{item.titleName && (
<li className={className} onClick={this.changeDescription.bind(this, index)}>
<div className={less.sidebar_list}>
<div style={{ display: "flex" }}>
<FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
</div>
<div className={less.titleName}>
<div>
<p>{item.titleName}</p>
</div>
</div>
</div>
</li>
)}
</Fragment>
);
});
return (
<>
<div className="abc">
<div>
<Navbar color="blue" bg="tomato" centerFlexNavbarContainer="flex" LiItem="NavBarli" MainStream="MainStream"
navbarSearchPage="Search" navbarHomePage="Home" NavbarMobileIconsBlock="mobile"
centerHeadlineNavbarColumn="center" showsidebarMobile={this.showsidebarMobile} menuMobileIsOpen={this.menuMobileIsOpen} />
<div>
{
this.state.menuMobileIsOpen ? <NavbarMobile /> : null
}
</div>
</div>
<div className={less.wrapper}>
<Menu isOpen={this.state.sidebarMobile} >
<main id="page-wrap">
<div className={less.sidebar}>
<div>
<ul onClick={this.hideMenu.bind(this)}>
{listLessons}
</ul>
</div>
</div>
</main>
</Menu>
<div>
<div className={less.main_content}>
<div className={less.main_inside_content}>
<div className={less.header}>
<div className={less.header_next_page}>
<div>
<h2>{this.props.lesson[this.state.indexDescription]["heading"]}</h2>
</div>
</div>
</div>
<div className={less.info} onClick={this.HideMenuMobileIsOpen.bind(this)}>
<div className={less.description}>
{
ReactHtmlParser(this.props.lesson[this.state.indexDescription]["data"]["description"])
}
<div className={less.btn_Next_Prev_Container}>
<div>
{
this.state.indexDescription >= 2 ?
<NextPage onClick={this.prevPage.bind(this)} > <Icon.ArrowLeft className={less.arrowLeft} /> Back </NextPage>
:
null
}
</div>
<div>
<NextPage onClick={this.nextPage.bind(this)} > Next <Icon.ArrowRight className={less.arrowRight} /> </NextPage>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
}
hideMenu
is invalid syntax. hideMenu
是无效的语法。 You're kind of declaring a function in the style of a class method inside of a class method, and also trying to setState inside of the method without actually calling it.您有点像在 class 方法内部以 class 方法的样式声明 function ,并且还尝试在方法内部设置状态而不实际调用它。
if (window.innerWidth < 900) {
hideMenu() {
this.setState({ sidebarMobile: false })
}
}
You'd need to either...你需要要么...
a) Forgo attempting to call a function and simply set state: a) 放弃尝试调用 function 并简单地设置 state:
if (window.innerWidth < 900) {
this.setState({ sidebarMobile: false })
}
b) Declare your function as a class method and call it within your condition, like this: b)将您的 function 声明为 class 方法并在您的条件下调用它,如下所示:
hideMenu() {
this.setState({ sidebarMobile: false })
}
resize() {
if (window.innerWidth > 900) {
this.setState({ sidebarMobile: true })
this.setState({ menuMobileIsOpen: false })
} else {
this.setState({ sidebarMobile: false })
}
if (window.innerWidth < 900) {
this.hideMenu()
}
}
If you're trying to create hideMenu
inside of your class method, you would do this:如果您尝试在 class 方法中创建
hideMenu
,您可以这样做:
resize() {
const hideMenu = () => this.setState({ sidebarMobile: false })
if (window.innerWidth > 900) {
this.setState({ sidebarMobile: true })
this.setState({ menuMobileIsOpen: false })
} else {
this.setState({ sidebarMobile: false })
}
if (window.innerWidth < 900) {
hideMenu()
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.