Javascript 通过使用钩子而不是类来隐藏和显示开始屏幕

我有一些显示开始屏幕的代码，但当我按下开始按钮时，它会给我一个错误：“this.props.clickevent”不是一个函数。使用钩子而不是类按下开始按钮后，如何重新移除开始屏幕？ 我基本上需要使gameOn变量在主屏幕中为true，以便它将屏幕设置为隐藏，但不确定如何使用挂钩来实现这一点

以下是我一直在使用的主屏幕代码：

import React from 'react';
import './homescreen.css';
var isGameOn = false;
class Homescreen extends React.Component{
   constructor(){
      super();
      this.clickMe = this.clickMe.bind(this);
}
  clickMe(){
//call parent function that manages state
 this.props.clickEvent();

   }
         render(){
       return (
          <div className={isGameOn ? "homescreen homescreen--visible" : "homescreen homescreen--hidden"}>
        <div className="homescreen__box">
          <h1 className="homescreen__title">Space&nbsp;  Matcher</h1>
          <div className="homescreen__stats">
            Games Played: <strong className="homescreen__number" >{this.props.gamesWon}</strong>
          </div>
          <button className="homescreen__shuffle-button " onClick={this.clickMe} >Start!</button>
           </div>
          </div>
         )
     }
}

export default Homescreen;
export {isGameOn}

import Homescreen, {isGameOn} from './homescreen'
var gamesPlayed = 0;
export default function App() {

function startGame(){
    gamesPlayed+=1;
    isGameOn = true;
    console.log(isGameOn);
  }
  return (

    <Homescreen gameOver = {isGameOn} gamesWon = {gamesPlayed} clickEvent = {startGame}/>
 }

上述代码必须与应用程序组件中的gameOn函数相等

如果gameOn函数没有参数，您需要像这样更改它

  clickMe(){
//call parent function that manages state
      this.props.clickEvent();
  }

你的应用程序组件必须如下所示

import React, { Component  } from 'react';

    export default class App extends React.Component{
        constructor(props){
            super(props);
            this.isGameOver = false;
            this.gamePlayed = 0;
        }

        gameOn(){
            this.isGameOver = !this.isGameOver;
            this.gamePlayed +=1;

        }
        render(){
            return(
                <Homescreen gameOver = {this.isGameOver} gamesWon = {this.gamesPlayed} clickEvent = {gameOn}/>

            )
        }

}

import React，{Component}来自'React'；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.isGameOver=false；
这个.gamePlayed=0；
}
gameOn（）{
this.isGameOver=！this.isGameOver；
这是1.gamePlayed+=1；
}
render（）{
返回(
)
}
}

上述代码必须与应用程序组件中的gameOn函数相等

如果gameOn函数没有参数，您需要像这样更改它

  clickMe(){
//call parent function that manages state
      this.props.clickEvent();
  }

你的应用程序组件必须如下所示

import React, { Component  } from 'react';

    export default class App extends React.Component{
        constructor(props){
            super(props);
            this.isGameOver = false;
            this.gamePlayed = 0;
        }

        gameOn(){
            this.isGameOver = !this.isGameOver;
            this.gamePlayed +=1;

        }
        render(){
            return(
                <Homescreen gameOver = {this.isGameOver} gamesWon = {this.gamesPlayed} clickEvent = {gameOn}/>

            )
        }

}

import React，{Component}来自'React'；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.isGameOver=false；
这个.gamePlayed=0；
}
gameOn（）{
this.isGameOver=！this.isGameOver；
这是1.gamePlayed+=1；
}
render（）{
返回(
)
}
}

您需要定义gameOn函数，并可能更新应用程序的状态

var gamesPlayed = 0;
export default function App() {
  constructor(props){
    super(props);
    this.state = {
      gameStarted: false
    };
  }
  gameOn(){
    this.setState({gameStarted: true})
  }
  render(){
    return (
      <Homescreen clickEvent = { this.gameOn.bind(this) }/>
    )
  }
}

var gamesPlayed=0；
导出默认函数App（）{
建造师（道具）{
超级（道具）；
此.state={
游戏开始：错误
};
}
gameOn（）{
this.setState（{gameStarted:true}）
}
render（）{
返回(
)
}
}

现在，您可以基于state.gameStarted在渲染中有条件地显示和隐藏内容

---

注意：您还需要将其绑定到函数，以便在回调中使用。请参见此处（）

您需要定义gameOn函数，并可能更新应用程序的状态

var gamesPlayed = 0;
export default function App() {
  constructor(props){
    super(props);
    this.state = {
      gameStarted: false
    };
  }
  gameOn(){
    this.setState({gameStarted: true})
  }
  render(){
    return (
      <Homescreen clickEvent = { this.gameOn.bind(this) }/>
    )
  }
}

var gamesPlayed=0；
导出默认函数App（）{
建造师（道具）{
超级（道具）；
此.state={
游戏开始：错误
};
}
gameOn（）{
this.setState（{gameStarted:true}）
}
render（）{
返回(
)
}
}

现在，您可以基于state.gameStarted在渲染中有条件地显示和隐藏内容

---

注意：您还需要将其绑定到函数，以便在回调中使用。请参见此处（）

问题中有一些部分不清楚，但我想您希望在单击“开始”按钮后隐藏内容

App.js

class App extends Component {
  constructor() {
    super();
    this.state = {
      isGameOn: false,
      gamesPlayed: 0
    };
  }


  startGame = () => {
    this.setState({
      isGameOn: true,
      gamesPlayed: this.state.gamesPlayed + 1
    })
    console.log(this.state.isGameOn);
  }

  render() {
    return (
      <Homescreen isGameOn = {this.state.isGameOn} gamesWon={this.state.gamesPlayed} clickEvent = {this.startGame}/>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
isGameOn:false，
游戏显示：0
};
}
StartName=（）=>{
这是我的国家({
是的，
gamesPlayed:this.state.gamesPlayed+1
})
console.log（this.state.isGameOn）；
}
render（）{
返回(
);
}
}

Homescreen.js

import React from 'react';
import './homescreen.css';
class Homescreen extends React.Component{
    constructor(){
      super();
      this.clickMe = this.clickMe.bind(this);
    }
    clickMe(){
      //call parent function that manages state
      this.props.clickEvent();

    }
    render(){
      return (
        <div className={!this.props.isGameOn ? "homescreen homescreen--visible" : "homescreen homescreen--hidden"}>
          <div className="homescreen__box">
            <h1 className="homescreen__title">Space&nbsp;  Matcher</h1>
            <div className="homescreen__stats">
              Games Played: <strong className="homescreen__number" >{this.props.gamesWon}</strong>
            </div>
            <button className="homescreen__shuffle-button " onClick={this.clickMe} >Start!</button>
          </div>
        </div>
      )
    }
}

export default Homescreen;

从“React”导入React；
导入“./homescreen.css”；
类主屏幕扩展了React.Component{
构造函数（）{
超级（）；
this.clickMe=this.clickMe.bind（this）；
}
点击我（）{
//调用管理状态的父函数
this.props.clickEvent（）；
}
render（）{
返回(
空间匹配器
玩的游戏：{this.props.gamesWon}
开始
)
}
}
导出默认主屏幕；

---

这是一个示例

问题中有一些部分不清楚，但我想您希望在单击“开始”按钮后隐藏内容

App.js

class App extends Component {
  constructor() {
    super();
    this.state = {
      isGameOn: false,
      gamesPlayed: 0
    };
  }


  startGame = () => {
    this.setState({
      isGameOn: true,
      gamesPlayed: this.state.gamesPlayed + 1
    })
    console.log(this.state.isGameOn);
  }

  render() {
    return (
      <Homescreen isGameOn = {this.state.isGameOn} gamesWon={this.state.gamesPlayed} clickEvent = {this.startGame}/>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
isGameOn:false，
游戏显示：0
};
}
StartName=（）=>{
这是我的国家({
是的，
gamesPlayed:this.state.gamesPlayed+1
})
console.log（this.state.isGameOn）；
}
render（）{
返回(
);
}
}

Homescreen.js

import React from 'react';
import './homescreen.css';
class Homescreen extends React.Component{
    constructor(){
      super();
      this.clickMe = this.clickMe.bind(this);
    }
    clickMe(){
      //call parent function that manages state
      this.props.clickEvent();

    }
    render(){
      return (
        <div className={!this.props.isGameOn ? "homescreen homescreen--visible" : "homescreen homescreen--hidden"}>
          <div className="homescreen__box">
            <h1 className="homescreen__title">Space&nbsp;  Matcher</h1>
            <div className="homescreen__stats">
              Games Played: <strong className="homescreen__number" >{this.props.gamesWon}</strong>
            </div>
            <button className="homescreen__shuffle-button " onClick={this.clickMe} >Start!</button>
          </div>
        </div>
      )
    }
}

export default Homescreen;

从“React”导入React；
导入“./homescreen.css”；
类主屏幕扩展了React.Component{
构造函数（）{
超级（）；
this.clickMe=this.clickMe.bind（this）；
}
点击我（）{
//调用管理状态的父函数
this.props.clickEvent（）；
}
render（）{
返回(
空间匹配器
玩的游戏：{this.props.gamesWon}
开始
)
}
}
导出默认主屏幕；

---

下面是一个示例

该函数在应用程序中的外观。我不明白如何在App.js中完成这一部分。App.js中的函数是什么样子的。我不明白如何在App.js中完成这一部分。是否可以在App中使用hook而不是state来完成这一点？是否可以在App中使用hook而不是state来完成这一点？您可以添加问题中的css（homescreen.css）吗？您可以添加css（homescreen.css）吗在这个问题中，是否可以省略App中的状态而改用hook？是否可以省略App中的状态而改用hook？