React JS中如何为匹配随机数的选中元素动态添加类名

你不需要手动操作DOM来添加类名，直接基于React状态驱动视图，在渲染时动态拼接类名即可，具体实现步骤如下：

• 首先修正现有代码的语法问题：原numbers.map的回调参数未加括号，正确写法应为numbers.map((number, index) => (...))，否则会抛出语法错误。
• 渲染每个数字行时，判断当前遍历的数字是否存在于已选数字列表selectedNumbers中，若存在则追加自定义的选中状态类名；如果需要给最新摇出的数字加特殊高亮，额外判断当前数字是否等于chosen状态值即可。
• 优化选号逻辑的状态更新写法，避免闭包导致拿到旧状态值、生成重复随机数的问题。

修正后的面板渲染代码 #

{numbers.map((number, index) => {
  // 校验当前数字是否已被选中
  const isSelected = selectedNumbers.includes(number);
  // 校验是否为最新摇出的数字（不需要特殊样式可以删掉这行）
  const isLatestChosen = chosen === number;
  // 拼接行元素类名
  const rowClass = [
    'bingo-grid__row',
    isSelected ? 'bingo-grid__row--selected' : '',
    isLatestChosen ? 'bingo-grid__row--latest' : ''
  ].filter(Boolean).join(' ');

  return (
    <div className={rowClass} id={index + 1} key={index}>
      <div className={className}>
        <div className="bingo-ball">
          <div className="bingo-ball__text">{number}</div>
        </div>
      </div>
    </div>
  )
})}

上述代码里的bingo-grid__row--selected、bingo-grid__row--latest是自定义类名，你可以替换成自己实际需要的类名，只要在CSS里写好对应样式就能实现选中高亮效果。

优化后的选号逻辑 #

原选号逻辑直接读取外部selectedNumbers值做循环判断，在多次快速触发选号时可能因为闭包拿到旧状态生成重复数字，改成函数式更新更稳妥：

const [chosen, setChosen] = useState(null);
const [selectedNumbers, setSelectedNumbers] = useState([]);
const chooseNumber = () => {
  let randomNum;
  setSelectedNumbers(prevSelected => {
    do {
      randomNum = Math.floor(Math.random() * 75) + 1;
    } while (prevSelected.includes(randomNum));
    setChosen(randomNum);
    return [...prevSelected, randomNum];
  });
};

注意：React场景下不要用document.querySelector、getElementById这类原生API手动给元素加类名，状态变化时组件会自动重渲染，动态拼接的类名会自动同步到DOM上，手动操作DOM反而容易出现状态和视图不同步的问题。

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