本文讲解如何在 react 游戏中通过状态管理动态显示/隐藏可点击字母——当用户点击某个字母后，该字母立即从可用字母列表中移除，防止重复使用，同时保持 ui 实时响应。
本文讲解如何在 react 游戏中通过状态管理动态显示/隐藏可点击字母——当用户点击某个字母后，该字母立即从可用字母列表中移除，防止重复使用，同时保持 ui 实时响应。
在构建单词拼写类游戏（如给定 6 个字母，玩家点击组成单词）时，一个核心交互需求是：字母一旦被选中，就应从候选区消失，避免重复点击。这本质上是一个「基于用户操作动态更新列表渲染」的问题，不能仅靠 DOM 操作或样式切换（如 display: none），而必须依托 React 的状态驱动渲染机制。
✅ 正确做法：用 useState 管理字母列表，并在点击时过滤掉已选字母
首先，确保 slicedLetters 是一个受控的状态变量：
import { useState } from 'react';
function WordGame() {
// 初始字母数组（例如：['A', 'B', 'C', 'D', 'E', 'F']）
const [slicedLetters, setSlicedLetters] = useState(['A', 'B', 'C', 'D', 'E', 'F']);
const [inputWord, setInputWord] = useState('');
const getLetterInput = (letter) => {
// 将点击的字母追加到当前输入（例如显示在顶部输入框）
setInputWord(prev => prev + letter);
// 关键：从状态中移除该字母 → 触发重新渲染
setSlicedLetters(prev => prev.filter(l => l !== letter));
};
return (
<div>
{/* 显示当前拼写的单词 */}
<div className="display-box">
<span>{inputWord}</span>
</div>
{/* 动态渲染可点击字母行 */}
<div className="letter_wrapper">
{slicedLetters.map((l, i) => (
<p key={i} className="letter_container">
<span
onClick={() => getLetterInput(l)}
className="letter"
role="button"
tabIndex="0"
onKeyPress={(e) => e.key === 'Enter' && getLetterInput(l)}
>
{l}
</span>
</p>
))}
</div>
</div>
);
}
export default WordGame;? 关键要点说明
- 不可直接修改原始数组：slicedLetters 是只读状态，必须通过 setSlicedLetters 更新；
- 使用函数式更新（推荐）：setSlicedLetters(prev => ...) 避免闭包中捕获过期状态，尤其在异步或批量更新场景下更可靠；
- key 必须稳定且唯一：此处用索引 i 可行（因数组长度递减、无重排），但若需支持拖拽、排序等复杂操作，建议改用唯一 ID 或字母+索引组合；
- 无障碍增强：添加 role="button"、tabIndex 和 onKeyPress，让键盘用户也能触发点击（符合 WCAG 标准）；
- 防误点优化（可选）：可在 getLetterInput 中加入判断 if (!slicedLetters.includes(letter)) return;，避免重复调用导致空操作。
⚠️ 常见误区提醒
- ❌ 错误：用 style={{ display: 'none' }} 或 CSS 类临时隐藏元素
→ 字母仍在数组中，下次渲染仍会存在，且无法真正“释放”该字母资源； - ❌ 错误：在 map 内部直接 splice() 或 filter() 后不更新状态
→ React 不感知变化，UI 不刷新； - ❌ 错误：在 onClick 中直接引用 slicedLetters（非函数式更新）
→ 若连续快速点击，可能基于旧状态执行多次过滤，导致意外移除多个字母。
✅ 总结
实现“点击即隐藏”的本质，是将 UI 视图与状态严格绑定：每一次用户交互都转化为状态变更，再由 React 自动完成差异渲染。只要坚持「状态唯一来源」和「不可变更新」原则，就能简洁、健壮地实现此类交互逻辑——无需手动操作 DOM，也无需引入额外库。
