React 組件'解析錯誤：意外的令牌，預期的“;”'渲染后

Question

我正在嘗試呈現一些復雜的三級邏輯，以正確的順序組織我的應用程序的組件。 它在渲染方法之后立即在括號處給我一個錯誤。

我在本網站上發現了針對類似情況描述的相同錯誤，但解決方案對我沒有幫助。 我讀到的大多數故障排除都涉及修復人們調用方法的方式/位置，但此腳本僅運行渲染。 此外，我確保將其包裝在一個標簽中並使用 className 而不是 class 和所有其他與 JSX 相關的語法錯誤修復。

這是我的 App.js：我將函數傳遞給其他組件，這些組件在 true 和 false 之間切換它們各自的同名狀態，以確定哪個被渲染。

import React, { Component } from 'react';
import './index.css';
import Game from './Game.js'
import Homescreen from './Homescreen.js'
import PlayerScreen from './Playerscreen.js'

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      Homescreen: true,
      PlayerScreen: false,
      Game: false,
      players: [{
        users: '',
        points: 0,
    }]
  }

  render() {
    return (
      <div>
      {
        (this.state.Homescreen) ?
        <div id="wrapper">
          <Homescreen newScreen={()=>this.setState({Homescreen: false, PlayerScreen: true})}></Homescreen>
        </div> : (this.state.PlayerScreen) ? <div id="wrapper">
          <PlayerScreen players={this.state.players} start={(players)=>this.setState({PlayerScreen: false, Game: true, players: players})}></PlayerScreen>
        </div> : <div id="wrapper"><Game players={this.state.players}></Game></div>
      }
      </div>
      );
    }
  }
}

export default App;

錯誤信息：

Failed to compile.

./src/App.js
  Line 20:12:  Parsing error: Unexpected token, expected ";"

  18 |   }
  19 | 
> 20 |   render() {
     |            ^
  21 |     return (
  22 |       <div>
  23 |       {

任何幫助將不勝感激。

Answer 1

您的 state 聲明中缺少大括號。

constructor(props){
    super(props);
    this.state = {
      Homescreen: true,
      PlayerScreen: false,
      Game: false,
      players: [{
        users: '',
        points: 0,
    }]
  } // this is missing
}

Answer 2

該消息需要一個分號，因為您尚未關閉構造函數方法；）

休息一下，在你的公寓/房子/辦公室里走一走，讓你的眼睛稍等片刻，捕捉這些小東西

Answer 3

      import React, { Component } from 'react';
      import './index.css';
      import Game from './Game.js'
      import Homescreen from './Homescreen.js'
      import PlayerScreen from './Playerscreen.js'

      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            Homescreen: true,
            PlayerScreen: false,
            Game: false,
            players: [{
              users: '',
              points: 0,
            }]
          }
        }
        render() {
          return (
            <div>
              {
                (this.state.Homescreen) ?
                  <div id="wrapper">
                    <Homescreen newScreen={() => this.setState({ Homescreen: false, PlayerScreen: true })} />
                  </div> :
                  (this.state.PlayerScreen) ?
                    <div id="wrapper">
                      <PlayerScreen players={this.state.players} start={(players) => this.setState({ PlayerScreen: false, Game: true, players: players })} />
                    </div> :
                    <div id="wrapper">
                      <Game players={this.state.players} />
                    </div>
              }
            </div>
          );
        }
      }
      export default App

用您的代碼替換此代碼並檢查

Answer 4

對您的主文件進行這些更改。

showComponent = (component) => {
      this.setState({currentComponent: component})
    }


let checkCurrentScreen = this.state.currentScreen;
              {checkCurrentScreen === "homeScreen" ? (
                 <Homescreen showComponent={this.state.showComponent} />
                  ) : checkCurrentScreen ? (
                    <PlayerScreen showComponent={this.state.showComponent} />
                    ) : <DefaultScreen />
               }

通過單擊按鈕傳入您的組件

const handleComponentChange = (e, component) => {
    e.preventDefault();
    props.showComponent(component)
  }

我為我的 o 型道歉，我已經在上面更正了。 最后一種方法是我在單獨的組件中使用的方法，我喜歡這種方法，因為它幾乎可以在任何地方使用他的方法。 這是使用的按鈕的示例。

<button 
      onClick={e => handleComponentChange(e, "author")}
      className="comment-submit-button">Cancel
      </button>

這個按鈕會將“e”和組件的名稱傳遞給返回上面的方法。 這允許這種方法是可移植的，這是完整的方法，也許這會有所幫助。

const handleComponentChange = (e, component) => { // passed in e
    e.preventDefault(); // for this
    props.showComponent(component);  // called method from index.js
  }

使用我的handleComponentChange，我可以傳入任何我希望使用的道具/狀態，以及我想要渲染的組件的名稱。 我可以很容易地添加 e 以防止默認，加上名稱。

ShowComponent 位於我的索引文件中，其中我的組件將被有條件地呈現。