调用CSS类.blinking时出现"expected assignment or function call"错误求助

这个错误本质是你在JavaScript的语句上下文里写了一个JSX表达式，但没有正确处理它——JSX是一种表达式，必须被赋值给变量、作为函数返回值，或者作为参数传递，不能直接当作语句使用。结合你说其他CSS类调用正常的情况，大概率是这段<span className="blinking"> Winner </span>所在的代码位置有语法问题，下面是最常见的两种场景和修复方案：

场景1：函数组件中未将JSX放在return语句里 #

如果这段代码是在函数组件中，你可能忘记用return返回JSX：

错误写法 #

function WinnerBadge() {
  // 这里直接写JSX，没有return，会触发错误
  <span className="blinking"> Winner </span>
}

正确写法 #

把JSX放在return里，如果是单行可以直接写，多行建议用括号包裹：

function WinnerBadge() {
  return <span className="blinking"> Winner </span>
}

// 多行JSX的写法
function WinnerBadge() {
  return (
    <div className="badge-container">
      <span className="blinking"> Winner </span>
    </div>
  )
}

场景2：条件/循环语句中缺少return或大括号 #

如果这段JSX是在if、for这类语句里，你需要确保正确返回或包裹它：

错误写法 #

function ResultDisplay({ isWinner }) {
  if (isWinner)
    // 这里直接写JSX，没有return或大括号，会触发错误
    <span className="blinking"> Winner </span>
  return <p>Game Over</p>
}

正确写法 #

要么在条件分支里用return返回JSX，要么用三元表达式（更符合JSX的写法）：

// 方案1：if分支里用return
function ResultDisplay({ isWinner }) {
  if (isWinner) {
    return <span className="blinking"> Winner </span>
  }
  return <p>Game Over</p>
}

// 方案2：用三元表达式
function ResultDisplay({ isWinner }) {
  return isWinner ? 
    <span className="blinking"> Winner </span> : 
    <p>Game Over</p>
}

额外检查：确认JSX的上下文 #

如果以上两种情况都不是，你可以检查这段代码是不是写在了普通JavaScript语句的位置（比如函数外部、变量赋值错误），比如：

// 错误：在函数外直接写JSX
<span className="blinking"> Winner </span>

// 正确：赋值给变量或者放在组件里
const winnerText = <span className="blinking"> Winner </span>;

function App() {
  return winnerText;
}

另外，你的CSS动画代码是完全正常的，问题肯定出在JSX的语法上下文上，按照上面的场景排查就能解决~

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