Question

我试图呈现一些复杂的第三级逻辑，以正确的顺序组织应用程序的组件。在render方法之后，它总是在括号内给我一个错误。

我在此网站上发现了针对类似情况描述的相同错误，但解决方案无济于事。我读到的大多数故障排除都涉及修复人们如何/在何处调用方法，但是此脚本仅运行渲染。另外，我确保将其包装在一个标签中，并使用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

您在状态声明中缺少大括号。

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位于我的索引文件中，在这里我的组件将有条件地呈现。

在渲染后反应组件“解析错误：意外的令牌，预期为“;”

4 个答案: