时间戳

首页 > 解决方案 > React 中的函数应该放在哪里？

javascript - React 中的函数应该放在哪里？

问题描述

抱歉这个愚蠢的问题，但我寻找并寻找答案，但没有任何东西对我有用。我有一个将 className 添加到我的导航栏的 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>

请帮忙。这是我的代码：

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;

这是我的 GitHub 存储库： https ://github.com/Meret12/Planyourmeal

标签： javascriptreactjsjsx

解决方案

你错过了一个右括号： -

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>
   );
 }

推荐阅读