在React应用中实现动态CSS类名切换的教程

import React, { useState } from 'react';
// ... 其他导入和组件代码

// 定义常量，使代码更具可读性
const CORRECT = 'correct';
const WRONG = 'wrong';

function YourGameComponent() {
  // userAnswer 状态用于存储用户答案的反馈结果
  const [userAnswer, setUserAnswer] = useState(null); // 初始值为 null，表示没有反馈

  // ... 其他组件逻辑和渲染函数
}

  const handleUserInput = (event) => {
    // ... 其他逻辑，如确定 hiddenSegment 和 index

    if (event.key === 'Enter') {
      if (event.target.value === abbreviateKeyFromChord(hiddenSegment.chords[index])) {
        console.log('CORRECT');
        // 更新状态为 CORRECT
        setUserAnswer(CORRECT); 
        // 假设这里有其他逻辑，例如显示正确答案后继续下一轮
        // startRound(); 
      } else {
        console.log('WRONG');
        // 更新状态为 WRONG
        setUserAnswer(WRONG);
      }
      // 可以在这里设置一个定时器，在一段时间后将 userAnswer 重置为 null，
      // 以便移除闪烁效果或准备下一次反馈
      setTimeout(() => setUserAnswer(null), 1000); // 1秒后清除反馈
    }
  };

npm install classnames
# 或
yarn add classnames

import classNames from 'classnames';

  const renderMajorSegment = (musicKey, index) => {
    let arc = calculateArc(outerRadius, innerRadius, musicKey.segmentMetadata.startAngle, musicKey.segmentMetadata.endAngle);
    let [arcCenterX, arcCenterY] = arc.centroid();

    // 使用 classNames 工具生成动态类名字符串
    const segmentClasses = classNames(
      'circle-segment', // 始终存在的基类
      { 'isVisible': musicKey.segmentMetadata.majorCircle.isVisible }, // 根据 isVisible 属性条件性添加
      { 'correctAnswer': userAnswer === CORRECT }, // 当 userAnswer 为 CORRECT 时添加
      { 'wrongAnswer': userAnswer === WRONG }    // 当 userAnswer 为 WRONG 时添加
    );

    return <g className={segmentClasses} key={index}>
            <path 
              d={arc.apply()} 
            />
            <text x={arcCenterX} y={arcCenterY} transform={`rotate(15, ${arcCenterX}, ${arcCenterY})`}>
              {abbreviateKeyFromChord(musicKey.chords[0])}
            </text>
          </g>
  }

/* 示例 CSS */
.circle-segment.correctAnswer {
  animation: flashGreen 0.5s ease-in-out forwards;
}

.circle-segment.wrongAnswer {
  animation: flashRed 0.5s ease-in-out forwards;
}

@keyframes flashGreen {
  0% { fill: none; stroke: none; } /* 假设path或text需要fill/stroke */
  50% { fill: green; stroke: green; } /* 闪烁到绿色 */
  100% { fill: none; stroke: none; } /* 恢复到初始状态或透明 */
}

@keyframes flashRed {
  0% { fill: none; stroke: none; }
  50% { fill: red; stroke: red; }
  100% { fill: none; stroke: none; }
}

/* 如果是针对 <g> 元素本身背景或边框，可能需要更复杂的SVG样式处理 */
/* 例如，可以为 path 元素添加样式 */
.circle-segment .path-element { /* 假设path有特定类名 */
  /* 默认样式 */
}

.circle-segment.correctAnswer path {
  fill: lightgreen; /* 或其他视觉效果 */
  transition: fill 0.3s ease-in-out;
}

.circle-segment.wrongAnswer path {
  fill: lightcoral;
  transition: fill 0.3s ease-in-out;
}