Javascript 增加/减少岩石/布/剪刀应用程序中的分数值

我不熟悉React和这个平台，我正在用React.js构建一个石头/剪刀/布应用程序。 该应用程序运行良好，但我无法增加游戏的得分值。如果玩家赢了，我想增加+1，如果CPU赢了，减少-1。（什么也没发生） 我可以在屏幕上看到分数，因为我将的状态设置为该值，所以无法更新它

我认为问题主要出在我的setScore（）函数上。我认为将它作为一个道具传递给是正确的，但实际上我不知道如何调用该方法并最终将其传递回

我知道有很多代码，但本质上我只想将setScore（）方法传递给子组件，调用它，然后将结果传递回父组件

你知道我怎样才能解决这个问题吗

提前非常感谢

App.js

import React from "react"
import Header from "./components/Header"
import Main from "./components/Main"
import Footer from "./components/Footer"

import './App.css';

class App extends React.Component {
  constructor(){
    super()
    this.state = {
      score: 12
    }
    this.setScore = this.setScore.bind(this)
  }

  /*here i create the setScore method*/
  setScore() {
    this.setState((prevState) => {
      return {
        score: prevState.score + 1
      }
    })
  }

  render() {
    return (
      <div className="App">
        <div className="container">
          <Header 
              rock = "ROCK" 
              paper = "PAPER" 
              scissors = "SCISSORS" 
              score = {this.state.score} 
          />
          /*here I pass the setScore method as a prop to my Main component (should I also pass the score 
           value as a parameter?)*/
          <Main setScore = {this.setScore}/>
          <Footer />
        </div>
      </div>
    )
  }
}

export default App;

从“React”导入React
从“/components/Header”导入标题
从“/components/Main”导入Main
从“/components/Footer”导入页脚
导入“/App.css”；
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
分数：12
}
this.setScore=this.setScore.bind（this）
}
/*这里我创建了setScore方法*/
setScore（）{
this.setState（（prevState）=>{
返回{
分数：prevState.score+1
}
})
}
render（）{
返回(
/*在这里，我将setScore方法作为道具传递给我的主要组件（我是否也应该通过分数
作为参数的值？）*/
)
}
}
导出默认应用程序；

Main.js

import React from "react"
import Choice from "./Choice"
import TryAgain from "./TryAgain"

import paper from '../images/icon-paper.svg'
import rock from '../images/icon-rock.svg'
import scissors from '../images/icon-scissors.svg'

import './Main.css';

class Main extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            onScreen: true,
            choiceName: '',
            choiceImage: '',
            choiceBorderColor: '',
            choiceExtraBorderColor: '',
            houseChoice: '',
            results:'',
            score: 0,
            setScore: props.setScore
        }
        this.handleClick = this.handleClick.bind(this)
        this.handleTryAgainClick = this.handleTryAgainClick.bind(this)
    }

    /*function that handles the user choice*/
    handleClick = (choiceName, choiceImage, choiceBorderColor, choiceExtraBorderColor) => () => {
        this.setState({
            onScreen: false,
            choiceName,
            choiceImage,
            choiceBorderColor,
            choiceExtraBorderColor,
        })

        /*function that get a random number between 0 and 2, and set this number to the house index*/
        function getRandomInt(max) {
            return Math.floor(Math.random() * Math.floor(max));
        }

        const index = getRandomInt(3)

        this.setState({
            houseChoice: index
        })

        const results = this.getResults(choiceName, index).toUpperCase()
        this.setState({
            results: results,
        })

        if(results === "WIN") {
            /*************what to put here*****************/
            const res = this.props.setScore
            console.log(res) /*here it prints the function itself!*/
            return {
                res
            }
        } else if (results === "LOSE" && this.state.score > 0) {
            /*************what to put here*****************/
            console.log(this.state.score)
            this.setState((prevState) => {
                return {
                    score: prevState.score - 1
                }
            })
        }
        else {
            console.log(this.state.score)
            this.setState((prevState) => {
                return {
                    score: prevState.score
                }
            })
        }
    }

    /*function that get the main logic and the results of the game*/
    getResults(choiceName, houseChoice) {
        if(choiceName === "paper" && houseChoice === 0) {
            return "draw"
        } else if(choiceName === "paper" && houseChoice === 1) {
            return "lose"
        } else if(choiceName === "paper" && houseChoice === 2) {
            return "win"
        }
        if(choiceName === "rock" && houseChoice === 0) {
            return "lose"
        } else if(choiceName === "rock" && houseChoice === 1) {
            return "win"
        } else if(choiceName === "rock" && houseChoice === 2) {
            return "draw"
        }
        if(choiceName === "scissors" && houseChoice === 0) {
            return "win"
        } else if(choiceName === "scissors" && houseChoice === 1) {
            return "draw"
        } else if(choiceName === "scissors" && houseChoice === 2) {
            return "lose"
        }
    }

    /*function that switches the screen and resets the index of the house*/
    handleTryAgainClick() {
        this.setState({
            onScreen: true,
            houseChoice: ''
        })
    }
    
    render() {
        return(
            <div>
                {/*HOME PAGE*/}
                <div className="main-container" style={{display: (this.state.onScreen ? "block" : "none")}}>
                    <div className="triangle-container">
                        <div onClick={this.handleClick}>
                            <Choice
                                name="paper"
                                image={paper} 
                                borderColor="hsl(230, 89%, 62%)" 
                                extraBorderColor="hsl(230, 89%, 65%)"
                                handleClick={this.handleClick}
                            />
                        </div>
                        <div onClick={this.handleClick}>
                            <Choice
                                name="scissors"
                                image={scissors} 
                                borderColor="hsl(39, 89%, 49%)" 
                                extraBorderColor="hsl(40, 84%, 53%)"
                                handleClick={this.handleClick}
                            />
                        </div>
                        <div style={{gridArea: "bottom"}} onClick={this.handleClick}>
                            <Choice 
                                name="rock"
                                image={rock} 
                                borderColor="hsl(349, 71%, 52%)" 
                                extraBorderColor="hsl(349, 70%, 56%)"
                                handleClick={this.handleClick}
                            />
                        </div>    
                    </div>
                </div>

                {/*RESULT PAGE*/}
                <div className="result-wrapper" style={{display: (!this.state.onScreen ? "grid" : "none")}}>

                    <div className="user-result-box">
                        <h4 className="result-title">YOU PICKED</h4>
                        <div 
                            className="elem-container result-container"
                            style={{
                                borderColor: this.state.choiceBorderColor, 
                                color: this.state.choiceExtraBorderColor
                            }}
                        >
                            <img src={this.state.choiceImage} className="choice-image" alt="img" />
                        </div>
                    </div>

                    <div className="house-result-box">
                        <h4 className="result-title">THE HOUSE PICKED</h4>

                        {this.state.houseChoice === 0 ? (

                            /*1*/
                            <div 
                                className="elem-container result-container"
                                style={{ 
                                    borderColor:"hsl(230, 89%, 62%)",
                                    color:"hsl(230, 89%, 65%)" 
                                }}
                            >
                                <img src={paper} className="choice-image" alt="img" />
                            </div>

                        ) : ( 

                            this.state.houseChoice === 1 ? (
                            
                            /*2*/
                            <div 
                                className="elem-container result-container"
                                style={{ 
                                    borderColor:"hsl(39, 89%, 49%)", 
                                    color:"hsl(40, 84%, 53%)" 
                                }}
                            >
                                <img src={scissors} className="choice-image" alt="img" />
                            </div>

                        ) : (

                            /*3*/
                            <div 
                                className="elem-container result-container"
                                    style={{ 
                                        borderColor:"hsl(349, 71%, 52%)", 
                                        color:"hsl(349, 70%, 56%)" 
                                    }}
                            >
                                <img src={rock} className="choice-image" alt="img" />
                            </div>
                        ))
                        }

                    </div>
                    <div className="final-result-container">
                    <h1 className="bold">YOU {this.state.results}</h1>
                        <TryAgain onClick={this.handleTryAgainClick}/>
                    </div>
                </div>
            </div>

        )
    }
}

export default Main


  [1]: https://codesandbox.io/s/nice-ardinghelli-96sum?file=/src/images/icon-scissors.svg

从“React”导入React
从“/Choice”导入选项
从“/TryAgain”导入TryAgain
从“../images/icon paper.svg”导入纸张
从“../images/icon rock.svg”导入岩石
从“../images/icon scissors.svg”导入剪刀
导入“/Main.css”；
类Main扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
屏幕上：没错，
精选名称：''，
选择图像：“”，
choiceBorderColor:“”，
选择外部边界颜色：“”，
房屋选择：''，
结果：“”，
分数：0，
setScore:props.setScore
}
this.handleClick=this.handleClick.bind（this）
this.handleTryAgainClick=this.handleTryAgainClick.bind（this）
}
/*处理用户选择的函数*/
handleClick=（choiceName、choiceImage、choiceBorderColor、choiceExtraBorderColor）=>（）=>{
这是我的国家({
屏幕上：错误，
精选名称，
选择图像，
选择颜色，
选择超边界颜色，
})
/*函数获取介于0和2之间的随机数，并将此数设置为房屋索引*/
函数getRandomInt（最大值）{
返回Math.floor（Math.random（）*Math.floor（max））；
}
常量索引=getRandomInt（3）
这是我的国家({
房屋选择：指数
})
const results=this.getResults（choiceName，index）.toUpperCase（）
这是我的国家({
结果:结果,，
})
如果（结果=“赢”）{
/*************在这里放什么*****************/
const res=this.props.setScore
log（res）/*这里它打印函数本身*/
返回{
物件
}
}否则如果（结果==“失败”&&this.state.score>0）{
/*************在这里放什么*****************/
console.log（this.state.score）
this.setState（（prevState）=>{
返回{
分数：prevState.score-1
}
})
}
否则{
console.log（this.state.score）
this.setState（（prevState）=>{
返回{
分数：prevState.score
}
})
}
}
/*函数，获取游戏的主要逻辑和结果*/
getResults（choiceName、House Choice）{
如果（choiceName==“纸张”&&houseChoice==0）{
返回“抽签”
}else if（choiceName==“纸张”&&houseChoice==1）{
返回“丢失”
}else if（choiceName==“纸张”&&houseChoice==2）{
返回“胜利”
}
如果（choiceName==“rock”&&houseChoice==0）{
返回“丢失”
}else if（choiceName==“rock”&&houseChoice==1）{
返回“胜利”
}else if（choiceName==“rock”&&houseChoice==2）{
返回“抽签”
}
如果（choiceName==“剪刀”&&houseChoice==0）{
返回“胜利”
}else if（choiceName==“剪刀”&&houseChoice==1）{
返回“抽签”
}else if（choiceName==“剪刀”&&houseChoice==2）{
返回“丢失”
}
}
/*切换屏幕和重置房屋索引的功能*/
handleTryAgainClick（）{
这是我的国家({
屏幕上：没错，
房屋选择：“”
})
}
render（）{
返回(
{/*主页*/}
{/*结果页*/}
你挑的
房子被挑走了
{this.state.houseChoice==0(