Question

我开始使用reactjs并在教程中尝试了一个简单的示例。返回html标签时会发生语法错误。

这是我得到的错误

./ SRC / App.js 语法错误：C：/Users/react-tutotial/src/App.js：意外的令牌（16：6）

14 |   render() {
   |     return{
16 |       <div>
   |       ^
17 |         <button>Increament</button>
18 |         {this.state.count}

这是app.js文件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {
  constructor(){
    super();

    this.state = {
      count : 0
    };
  }
  render() {
    return{
      <div>
        <button>Increment</button>
        {this.state.count} 
      </div>
    };
  }
}

export default App;

Answer 1

您应该使用console.log / (，而不是) / {：

并且知道render() { return ( // changed this line <div> <button>Increment</button> {this.state.count} </div> ); // changed this line }有可选项，但如果您删除它们，则()必须与<div>位于同一行，例如return。（当你在return <div> JavaScript疯了之后断线时。）

修改

好吧，我觉得我应该详细说明“疯狂”是什么：当你在return之后断开一条线时，JavaScript基本上将它视为return并忽略其余部分。这实际上与return;相同。归咎于JavaScript's ASI (Automatic Semicolon Insertion)“功能”。

关于为什么return undefined; / {无法正常工作：虽然在内部一个JSX“表达式”you can use curly braces to place any JavaScript expression，但在此时出现错误，你还不是里面一个JSX表达式。这使得该代码被解释为常规JavaScript表达式。在常规JavaScript中，单独使用花括号可以创建上下文（例如，}变量将是本地的）或对象文字。返回需要一个表达式。上下文不是表达。而且你的代码不是（也不应该是）有效的对象文字。

ReactJS：语法错误：src / App.js：意外的令牌（16：6）

1 个答案: