React Hooks实现条件按钮可见性：React游戏中仅在玩家失败时显示重置按钮的实现问题

Got it! 既然你已经在用gameStatus状态跟踪游戏状态了，这个需求用React的条件渲染就能轻松实现，不用额外复杂的逻辑。我来帮你调整代码：

步骤1：确认gameStatus的State定义 #

首先确保你已经在组件顶部声明了gameStatus的useState（如果还没加的话）：

import { useState } from 'react';

// 在组件内部
const [gameStatus, setGameStatus] = useState("Game in progress");

步骤2：给按钮添加条件渲染 #

你只需要在渲染按钮的时候，判断gameStatus是否为"You Lost!"，只有满足条件时才渲染按钮。React里可以用&&运算符实现简洁的条件渲染：

{gameStatus === "You Lost!" && (
  <button onClick={refreshGame} className="btn-refresh btn-outline-danger">
    Play Again?
  </button>
)}

完整调整后的相关代码片段 #

把你的按钮部分替换成上面的代码，结合你现有的函数，整体大概是这样：

import { useState } from 'react';

// 组件内部
const [gameStatus, setGameStatus] = useState("Game in progress");
const [boardData, setBoardData] = useState(initBoardData(props.height, props.width, props.mines));
const [mineCount, setMineCount] = useState(10);

function handleCellClick(x, y) {
  let updatedData = [...boardData];
  // check if revealed. return if true.
  if (updatedData[x][y].isRevealed || updatedData[x][y].isFlagged) return null;
  // check if mine. game over if true
  if (updatedData[x][y].isMine) {
    setGameStatus("You Lost!");
    revealBoard();
  }
}

function refreshGame() {
  setBoardData(initBoardData(props.height, props.width, props.mines));
  setGameStatus("Game in progress");
  setMineCount(10);
}

// 渲染部分
return (
  <div>
    {/* 其他游戏界面元素 */}
    {gameStatus === "You Lost!" && (
      <button onClick={refreshGame} className="btn-refresh btn-outline-danger">
        Play Again?
      </button>
    )}
  </div>
);

扩展小提示 #

如果之后你想在玩家获胜时也显示重置按钮，只需要扩展条件就行：

{(gameStatus === "You Lost!" || gameStatus === "You Won!") && (
  <button onClick={refreshGame} className="btn-refresh btn-outline-danger">
    Play Again?
  </button>
)}

这样按钮就只会在你想要的状态下出现啦，是不是很简单😉

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