React石头剪刀布游戏：胜负判断结果的使用及按钮高亮问题求助

核心问题分析 #

你当前的PlayRound组件里已经计算出了result，但没法把这个状态传递给父组件RockPaperScissor使用，导致无法实现按钮高亮的效果。另外组件参数的写法也有问题（React组件的props是单个对象，playerPick应该作为props的一部分），先一步步修正：

步骤1：修正组件参数，传递result到父组件 #

首先在父组件RockPaperScissor里新增一个状态来存储回合结果，同时给PlayRound组件添加回调props来传递result：

// RockPaperScissor.js
import { useState } from 'react';
import PlayRound from './PlayRound';
import GameButton from './GameButton';
import { ROCK, PAPER, SCISSORS } from './assets';

function RockPaperScissor() {
  const [score, setScore] = useState(0);
  const [computerPick, setComputerPick] = useState(null);
  const [playerPick, setPlayerPick] = useState(null);
  // 新增状态存储回合结果
  const [roundResult, setRoundResult] = useState(null);

  // 玩家选择触发的函数
  const handlePlayerPick = (pick) => {
    setPlayerPick(pick);
    // 重置上一轮结果，避免干扰新回合
    setRoundResult(null);
  };

  return (
    <div className="game-container">
      {/* 玩家选择按钮 */}
      <div className="player-buttons">
        <GameButton 
          color="red" 
          id="RockButton" 
          src={ROCK} 
          onClick={() => handlePlayerPick("rock")}
          {/* 根据结果判断是否高亮 */}
          className={roundResult === "win" && playerPick === "rock" ? "highlighted" : ""}
        />
        <GameButton 
          color="blue" 
          id="PaperButton" 
          src={PAPER} 
          onClick={() => handlePlayerPick("paper")}
          className={roundResult === "win" && playerPick === "paper" ? "highlighted" : ""}
        />
        <GameButton 
          color="yellow" 
          id="ScissorsButton" 
          src={SCISSORS} 
          onClick={() => handlePlayerPick("scissors")}
          className={roundResult === "win" && playerPick === "scissors" ? "highlighted" : ""}
        />
      </div>

      {/* 显示电脑选择，这里用PlayRound组件并传递回调 */}
      {playerPick && (
        <PlayRound 
          setComputerPick={setComputerPick} 
          setScore={setScore} 
          playerPick={playerPick}
          // 传递回调接收result
          onResult={setRoundResult}
        />
      )}

      {/* 电脑按钮的高亮（如果是父组件渲染电脑按钮的话） */}
      <div className="computer-buttons">
        {computerPick === "rock" && (
          <GameButton 
            color="red" 
            id="ComputerRockButton" 
            src={ROCK} 
            className={roundResult === "lose" && computerPick === "rock" ? "highlighted" : ""}
          />
        )}
        {/* paper和scissors同理 */}
        {computerPick === "paper" && (
          <GameButton 
            color="blue" 
            id="ComputerPaperButton" 
            src={PAPER} 
            className={roundResult === "lose" && computerPick === "paper" ? "highlighted" : ""}
          />
        )}
        {computerPick === "scissors" && (
          <GameButton 
            color="yellow" 
            id="ComputerScissorsButton" 
            src={SCISSORS} 
            className={roundResult === "lose" && computerPick === "scissors" ? "highlighted" : ""}
          />
        )}
      </div>

      <div className="score">当前分数: {score}</div>
      {roundResult && <div className="result">回合结果: {roundResult}</div>}
    </div>
  );
}

export default RockPaperScissor;

然后修改PlayRound组件，修正参数并通过回调传递result：

// PlayRound.js
import { ROCK, PAPER, SCISSORS } from './assets';
import GameButton from './GameButton';

function PlayRound({ setComputerPick, setScore, playerPick, onResult }) {
  // 简化电脑选择逻辑
  const picks = ["rock", "paper", "scissors"];
  const randomIndex = Math.floor(Math.random() * 3);
  const computerPick = picks[randomIndex];

  console.log("computer picked: " + computerPick);
  setComputerPick(computerPick);

  let result = "";
  // 用对象映射简化胜负判断，更清晰
  const winMap = {
    rock: "scissors",
    paper: "rock",
    scissors: "paper"
  };

  if (winMap[playerPick] === computerPick) {
    result = "win";
    setScore(prevScore => prevScore + 1);
  } else if (playerPick === computerPick) {
    result = "draw";
  } else {
    result = "lose";
    setScore(prevScore => prevScore - 1);
  }

  console.log("round result: " + result);
  // 把result传递给父组件
  onResult(result);

  // 如果PlayRound只负责返回电脑按钮，这里可以保留
  return (
    <>
      {computerPick === "rock" && (
        <GameButton color="red" id="RockButton" src={ROCK} />
      )}
      {computerPick === "paper" && (
        <GameButton color="blue" id="PaperButton" src={PAPER} />
      )}
      {computerPick === "scissors" && (
        <GameButton color="yellow" id="ScissorsButton" src={SCISSORS} />
      )}
    </>
  );
}

export default PlayRound;

步骤2：添加高亮样式 #

在CSS文件里添加高亮的样式：

.highlighted {
  border: 3px solid #2ecc71;
  box-shadow: 0 0 15px rgba(46, 204, 113, 0.6);
  transform: scale(1.1);
  transition: all 0.2s ease;
}

关键说明 #

1. 状态传递：通过父组件的setRoundResult回调，让子组件PlayRound把计算好的result传递回去，这样父组件就能拿到结果控制按钮高亮。
2. 简化判断逻辑：用winMap对象替代冗长的if-else条件，代码更简洁且不易出错。
3. 组件参数修正：原来的PlayRound参数写法错误，React组件的props是单个对象，必须把playerPick放到props对象里。

内容的提问来源于stack exchange，提问作者Villo