在我的React应用程序中遇到解析错误

Question

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

导出默认Square; 我期望程序在UI上呈现3 x 3的网格。

Answer 1

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

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

而且，在Grid组件中，您需要从render函数return一个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>
      </>
    )
  }
}

Answer 2

下行的问题。

class App extends from React.Component {

它应该看起来像下面

class App extends React.Component {

另外，您还必须return Grid组件的render方法。

希望这个能对您有所帮助！