在我的 React 应用程序中出现解析错误答案

【问题标题】：Getting a parsing error in my React application在我的 React 应用程序中出现解析错误
【发布时间】：2020-01-15 11:56:04
【问题描述】：

运行我的 React 应用程序时遇到解析错误编译失败 ./src/App.js 第 7 行：解析错误：意外令牌，应为“{”

我检查了我的代码中是否有任何意外标记，但没有看到任何标记。

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import './game.html';
    import Grid from './board.js';
    class App extends from React.Component {
        render(){
            return(
                     <div className="game-board">
                        <Grid/>
                     </div>
                  );
        }
    }
    export default App;


    import React from 'react';
    import Square from './square.js';
    class Grid extends React.Component{
        renderSquare(i)
        {
            return <Square value={i}/>
        }
        render(){
            <div className="gamerow">
                {this.renderSquare(1)}
                {this.renderSquare(2)}
                {this.renderSquare(3)}
            </div>
            <div className="gamerow">
                {this.renderSquare(4)}
                {this.renderSquare(5)}
                {this.renderSquare(6)}
            </div>
            <div className="gamerow">
                {this.renderSquare(7)}
                {this.renderSquare(8)}
                {this.renderSquare(9)}
            </div>
            }
    }
   export default Grid;


   import React from 'react';
  //import Grid  from './board.js
   class Square extends React.Component{
        render(){
            return(
                      <button className= "square">{this.props.value} 
                      </button>
                  );
        }
   }

导出默认方形；我希望程序在 UI 上呈现 3 x 3 的网格。

【问题讨论】：

标签： javascript html css reactjs jsx

【解决方案1】：

扩展类时没有from这样的关键字：

//                 v remove from
class App extends from React.Component` { ... }

此外，在Grid 组件中，您需要来自render 函数的return 语句，您只能渲染单个ReactElement，在此示例中我使用<React.Fragment/> 对所有<div/> 元素进行分组。

class Grid extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
  render() {
    return (
//    v <React.Fragment>
      <>
        <div className="gamerow">
          {this.renderSquare(1)}
          {this.renderSquare(2)}
          {this.renderSquare(3)}
        </div>
        <div className="gamerow">
          {this.renderSquare(4)}
          {this.renderSquare(5)}
          {this.renderSquare(6)}
        </div>
        <div className="gamerow">
          {this.renderSquare(7)}
          {this.renderSquare(8)}
          {this.renderSquare(9)}
        </div>
      </>
    )
  }
}

【讨论】：

是的，它更漂亮:-(

【解决方案2】：

下面一行有问题。

class App extends from React.Component {

应该如下所示

class App extends React.Component {

你还得returnGrid组件的渲染方法。

希望对您有所帮助！

【讨论】：