Unexpected token, expected 是什么意思？在 ReactJS 中是什么意思？

Question

需要协助处理移动设备和桌面的导航菜单，但收到错误消息。当您收到这样的错误消息时，这意味着什么？再次遇到如何解决

第 20:21 行：解析错误：意外的令牌，应为“;”

      this.hide = this.hide.bind(this);
  19 | 
  20 |         toggleShow(){
     |                     ^
  21 |             this.setState({show: !this.state.show});
  22 |         }

完整代码：

class Navigation extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            show: false
        }

        this.toggleShow = this.toggleShow.bind(this);
        this.hide = this.hide.bind(this);

        toggleShow(){
            this.setState({show: !this.state.show});
        }

        hide(e){
            if(e && e.relatedTarget){
              e.relatedTarget.click();
            }
        this.setState({show: false});
    }

完整代码

render() {
      return (
          <Router>
              <div className="FlexContainer NavbarContainer">

                  <div className="mobilecontainer LeftNav">
                      <h2 className="BrandName LeftNav mobileboxmenu inline">Kommonplaces</h2>
                      <div 
                      className="hamburger inlinev"  
                      onClick={this.toggleShow}  
                      onBlur={this.hide}>
                          <img alt="menubtn" src={hamburger}></img>
                      </div>
                  </div>

                  {
                        this.state.show &&
                    ( 
                        <ul className="NavBar">
                            <Dropdown/>    
                            <li className="RightNav"><Link to="/">Host Your Space</Link></li>
                            <li className="RightNav"><Link to="/">About Us</Link></li>
                            <li className="RightNav"><Link to0="/">Contact Us</Link></li>
                            <li className="RightNav"><Link to="/">Sign Up</Link></li>
                            <li className="RightNav"><Link to="/">Login</Link></li>
                        </ul>
                    )
                  }
               </div>
         </Router>
      );
    }
  }

  export default Navigation;

Answer 1

这是一个 javascript 语法错误。令牌是一个字符。与 React 无关。

你可以查看这些关于 Js 类的链接： - https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function

• https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object

您的代码应该是这样的，以免产生错误：

class Navigation extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            show: false
        }
    }
    toggleShow() {
        this.toggleShow = this.toggleShow.bind(this)
        this.hide = this.hide.bind(this)
        this.setState({ show: !this.state.show });
    }

    hide(e) {
        if (e && e.relatedTarget) {
            e.relatedTarget.click();
        }
        this.setState({ show: false });
    }
}

Answer 2

问题在于您使用的是在构造函数中定义类函数的语法。要解决此问题，请使用：

class Navigation extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            show: false
        }

        this.toggleShow = this.toggleShow.bind(this);
        this.hide = this.hide.bind(this);
    }

    toggleShow(){
        this.setState({show: !this.state.show});
    }

    hide(e){
        if(e && e.relatedTarget){
            e.relatedTarget.click();
        }
        this.setState({show: false});
    }
}

在本例中，constructor 在 toggleShow 的定义之前结束。