本文讲解如何在 react 应用中动态显示/隐藏字母元素：通过状态管理（usestate）配合 filter 方法，在用户点击字母后将其从可用列表中移除，确保不可重复使用。
本文讲解如何在 react 应用中动态显示/隐藏字母元素：通过状态管理（usestate）配合 filter 方法，在用户点击字母后将其从可用列表中移除，确保不可重复使用。
在构建单词拼写类游戏（如给定 6 个字母，玩家点击组合成词）时，一个关键交互需求是：字母被点击一次后，立即从可选区域消失，防止重复选取。这本质上是一个「响应式 UI 状态更新」问题——不能仅靠 DOM 操作隐藏元素，而必须让 React 的渲染逻辑感知到数据变化。
✅ 正确做法：用状态驱动 UI
首先，将字母数组 slicedLetters 声明为 React 状态变量，而非普通常量或 props：
import { useState } from 'react';
function WordGame() {
// 初始字母（例如：['C', 'A', 'T', 'D', 'O', 'G']）
const [slicedLetters, setSlicedLetters] = useState<string[]>(['C', 'A', 'T', 'D', 'O', 'G']);
const getLetterInput = (letter: string) => {
// ✅ 核心逻辑：过滤掉被点击的字母
setSlicedLetters(prev => prev.filter(l => l !== letter));
// ? 可选：将字母添加到输入框/已选区域（根据你的业务逻辑扩展）
// addSelectedLetter(letter);
};
return (
<div className="letter_wrapper">
{slicedLetters.map((l, i) => (
<p key={i} className="letter_container">
<span
onClick={() => getLetterInput(l)}
className="letter"
>
{l}
</span>
</p>
))}
</div>
);
}
export default WordGame;⚠️ 关键注意事项
- 避免直接修改原数组：切勿使用 splice() 或 delete 等会改变原数组的方法，React 不会触发重渲染。
- 使用函数式更新（推荐）：setSlicedLetters(prev => ...) 确保获取最新状态，尤其在快速连续点击或并发更新场景下更安全（如示例中用 _slicedLetters 参数体现的意图）。
-
key 必须稳定唯一：当前用索引 i 作 key 在数组长度变化且顺序可能变动时存在风险。若字母可能重复（如两个 'A'），建议改用唯一 ID 或 letter + index 组合（如 key={${l}-${i}}），或在初始化时生成带 id 的对象数组：
useState<{id: string; char: string}[]>([ { id: 'a1', char: 'C' }, { id: 'a2', char: 'A' }, // ... ]); // 然后 filter 时按 id 移除
? 补充：支持“撤销”或“重置”
若需支持取消选择，可维护两个状态：availableLetters 和 selectedLetters，并提供 removeFromSelected 和 resetAll 方法，实现双向控制。
✅ 总结
React 中“隐藏元素”的本质是从参与渲染的数据源中移除对应项。只要 slicedLetters 状态更新，map 就自动渲染剩余字母——无需手动操作 DOM、不依赖 CSS display: none 或 visibility: hidden。这种声明式思维，正是 React 数据驱动 UI 的核心优势。
