ReactJS中如何根据跨组件条件修改词库组件样式？

核心思路是通过状态管理已找到的单词，并在渲染词库时动态为已找到的单词添加样式。以下是具体实现步骤和代码修改：

1. 重构状态，替换全局变量 #

原代码中emptyWord是全局变量，无法触发组件重渲染。需要将其移至父组件作为状态管理，同时新增foundWords状态存储已找到的单词。

import { useState } from 'react';
import { checkWord } from './你的辅助文件路径';

function WordSearch() {
  const [currentWord, setCurrentWord] = useState('');
  const [foundWords, setFoundWords] = useState(new Set());
  const totalWords = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig']; // 你的词库

  // 处理字母点击逻辑
  const handleLetterSelect = (letter) => {
    const { newWord, matchedWord } = checkWord(letter, currentWord, totalWords);
    setCurrentWord(newWord);
    // 找到匹配单词时，加入已找到集合
    if (matchedWord) {
      setFoundWords(prev => new Set([...prev, matchedWord.toLowerCase()]));
      // 可选：找到单词后清空当前输入序列，方便用户找下一个
      setCurrentWord('');
    }
  };

  return (
    <div>
      {/* 棋盘区域（示例） */}
      <table>
        <tbody>
          <tr>
            <Letter letter="A" onSelect={() => handleLetterSelect("A")} />
            {/* 其他Letter组件按需渲染 */}
          </tr>
        </tbody>
      </table>

      {/* 词库区域 */}
      <div className="word-bank">Your words are:
        {totalWords.map((word, idx) => (
          <Word 
            key={idx} 
            word={word} 
            isFound={foundWords.has(word.toLowerCase())} 
          />
        ))}
      </div>
    </div>
  );
}

2. 修改Letter组件，移除全局变量依赖 #

不再直接修改全局emptyWord，而是调用父组件传递的回调函数：

function Letter(props) {
  const [isPicking, setIsPicking] = useState(false);

  const handleClick = () => {
    setIsPicking(current => !current);
    props.onSelect(props.letter);
  };

  return (
    <th
      style={{ backgroundColor: isPicking ? "green" : "" }}
      className="letter"
      onClick={handleClick}
    >
      {props.letter}
    </th>
  );
}

3. 优化checkWord函数，返回匹配结果 #

让函数不仅返回拼接后的字符串，还返回匹配到的单词，方便父组件更新状态：

export const checkWord = (letter, currentWord, targetWords) => {
  const newWord = currentWord.concat(letter.toLowerCase());
  let matchedWord = null;

  // 检查是否匹配目标词库
  for (const word of targetWords) {
    if (word.toLowerCase() === newWord) {
      matchedWord = word;
      break;
    }
  }

  return { newWord, matchedWord };
};

4. 动态渲染Word组件样式 #

根据isFound属性为已找到的单词添加删除线等样式：

function Word({ word, isFound }) {
  return (
    <span 
      style={{ 
        margin: '0 8px',
        textDecoration: isFound ? 'line-through' : 'none',
        opacity: isFound ? 0.6 : 1,
        fontWeight: isFound ? 'normal' : 'bold'
      }}
    >
      {word}
    </span>
  );
}

额外优化点 #

• 使用Set存储已找到单词，判断是否存在的效率比数组includes更高（O(1) vs O(n)）。
• 用map循环渲染词库单词，避免硬编码索引，适配词库长度变化。
• 找到单词后可自动清空当前输入序列，提升用户体验。

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