Javascript 一个函数应该在什么时候响应？

很抱歉这个愚蠢的问题，但我一直在寻找答案，什么都不适合我。 我有一个handleClick函数，它将类名添加到导航栏中，因此当它收缩时，会删除链接并显示三行。但当我添加函数时，React无法编译，并抛出以下错误：

./src/App.js
Syntax error: Unexpected token, expected ";" (25:11)

  23 |       x.className = "brand";
  24 | }
> 25 |   render(){
     |           ^
  26 |     const carrot = <FontAwesomeIcon icon={faCarrot} />
  27 |     return (
  28 |       <HashRouter>

/src/App.js
语法错误：意外标记，应为“；”（25:11）
23 | x.className=“品牌”；
24 | }
>25 | render（）{
|           ^
26 |常数胡萝卜=
27 |返回(
28 |       

请帮忙。这是我的代码：

import React, { Component } from 'react';
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import Home from "./home";
import Stuff from "./stuff";
import Contact from "./contact";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCarrot } from '@fortawesome/free-solid-svg-icons';

class App extends Component {
  constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}
  handleClick() {
    var x = document.getElementById("myTopnav");
    if (x.className === "brand") {
      x.className += " responsive";
    } else {
      x.className = "brand";
}
  render(){
    const carrot = <FontAwesomeIcon icon={faCarrot} />
    return (
      <HashRouter>
      <div className="wrapper">
        <div className="brand" id="myTopnav">
          <a href="#"><h1>{carrot}Plan your meal</h1></a>
          <a href="#"><h3 className="login">Log In</h3></a>
          <a href="#"><h3 className="signup">Sign Up</h3></a>
          <a href="javascript:void(0);" className="icon" onClick={this.handleClick}>&#9776;</a>
        </div>

        <div>
          <ul className="header">
          <li><NavLink exact to="/" href="/">Home</NavLink></li>
          <li><NavLink to="/stuff">Single meal</NavLink></li>
          <li><NavLink to="/contact">Whole day</NavLink></li>
        </ul>
        </div>
        <div className="content">
          <Route exact path="/" component={Home}/>
          <Route path="/stuff" component={Stuff}/>
          <Route path="/contact" component={Contact}/>
        </div>
      </div>
      </HashRouter>
    );
  }
}

export default App;

import React，{Component}来自'React'；
进口{
路线,，
导航链接，
哈希路由器
}从“反应路由器dom”；
从“/Home”导入主页；
从“/Stuff”导入内容；
从“/Contact”导入联系人；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortawesome/free solid svg icons”导入{faCarrot}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“品牌”）{
x、 类名+=“响应”；
}否则{
x、 className=“品牌”；
}
render（）{
常量胡萝卜=
返回(

家
一餐
整天

);
}
}
导出默认应用程序；

这是我的GitHub存储库：

---

您错过了一个结束括号：-

class App extends Component {
  constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}
  handleClick() {
    var x = document.getElementById("myTopnav");
    if (x.className === "brand") {
      x.className += " responsive";
    } else {
      x.className = "brand";
  }
}

 render() {
  const carrot = <FontAwesomeIcon icon={faCarrot} />;
   return (
    <HashRouter>
      <div className="wrapper">
        <div className="brand" id="myTopnav">
          <a href="#"><h1>{carrot}Plan your meal</h1></a>
          <a href="#"><h3 className="login">Log In</h3></a>
          <a href="#"><h3 className="signup">Sign Up</h3></a>
          <a href="javascript:void(0);" className="icon" onClick={this.handleClick}>&#9776;</a>
        </div>

        <div>
          <ul className="header">
          <li><NavLink exact to="/" href="/">Home</NavLink></li>
          <li><NavLink to="/stuff">Single meal</NavLink></li>
          <li><NavLink to="/contact">Whole day</NavLink></li>
        </ul>
        </div>
        <div className="content">
          <Route exact path="/" component={Home}/>
          <Route path="/stuff" component={Stuff}/>
          <Route path="/contact" component={Contact}/>
        </div>
      </div>
      </HashRouter>
   );
 }

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“品牌”）{
x、 类名+=“响应”；
}否则{
x、 className=“品牌”；
}
}
render（）{
常量胡萝卜=；
返回(

家
一餐
整天

);
}

befor

render（）{

add

}

在

handleClick

函数中，

else

语句块未关闭。在x.className=“brand”后面缺少一个关闭的花括号；