首页 > 解决方案 > 语法错误:运行 npm start 时 React 中出现意外的令牌

问题描述

我开始收到语法错误:今天和在运行 npm start 时出现意外的标记,即使我已经好几周没有碰过我的代码了

这是编译错误

Syntax error: Unexpected token (14:7)

  12 |   render(){
  13 |     return(
> 14 |       <>
     |        ^
  15 |        <nav className="Navitems">
  16 |          <h1 className="Navbar-logo">Lauren's Page<i className= "fac fa-react"></i></h1>
  17 |             <div className="menu-icon" onClick={this.handleClick}>

这是代码:

import React, {useState, Component} from 'react';
import './Navbar.css';
import {Navitems} from './Navitems';

class Navbar extends Component {
  state= { clicked: false}

  handleClick=()=> {
    this.setState({clicked: !this.state.clicked})
  }

  render(){
    return(
      <>
       <nav className="Navitems">
         <h1 className="Navbar-logo">Lauren's Page<i className= "fac fa-react"></i></h1>
            <div className="menu-icon" onClick={this.handleClick}>
              <i className={this.state.clicked ? 'fas fa-time':'fas fa-bars'}></i>
            </div>
         <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
           {Navitems.map((item, index) =>{
             return (
              <li key={index}>
                <a className={item.cName} href={item.url}>
                {item.title}
                </a>
              </li>
             )
           })} 
         </ul>
       </nav>
      </>
    );
  }
};
export default Navbar;

我只是想弄清楚为什么它现在显示错误,而以前没有。谢谢!

标签: reactjs

解决方案


您要么必须使用旧的 react 或 babel 版本,请查看此链接:

尝试导入 Fragment 或使用 <React.Fragment>

https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax


推荐阅读