React运行按钮动画JS代码报no-unused-expressions错误如何解决

你遇到的no-unused-expressions报错和React框架规范没有直接关系，属于JavaScript基础语法写法问题：

• 报错指向代码第3行的e.preventDefault，这行代码只是获取了事件对象上preventDefault方法的引用，没有加括号执行调用，不会产生任何实际运行效果，属于无效表达式，触发了ESLint的语法规则校验。
• 这行的语法修正非常简单，给方法加上执行括号即可：

e.preventDefault()

你当前写的代码是原生JavaScript的实现思路：通过getElementsByClassName查询DOM、手动绑定事件监听、直接操作DOM的classList控制类名。这种写法在React中不推荐使用，很容易和React的虚拟DOM渲染逻辑产生冲突，导致样式更新不生效、内存泄漏等问题。
符合React开发规范的按钮点击动画实现参考：

import { useState } from 'react'
// 提前在CSS文件中写好.animate类对应的动画样式

function BubblyButton({ btnText }) {
  // 用state控制动画类的挂载状态
  const [animateActive, setAnimateActive] = useState(false)

  const handleClick = (e) => {
    e.preventDefault()
    // 先重置状态保证动画可以重复触发
    setAnimateActive(false)
    // 在下一帧更新状态触发动画，避免状态合并导致重置失效
    requestAnimationFrame(() => {
      setAnimateActive(true)
      // 动画时长和原逻辑保持一致，700ms后移除动画类
      setTimeout(() => {
        setAnimateActive(false)
      }, 700)
    })
  }

  return (
    <button
      className={`bubbly-button ${animateActive ? 'animate' : ''}`}
      onClick={handleClick}
    >
      {btnText}
    </button>
  )
}

export default BubblyButton

这种实现方式完全遵循React的状态驱动视图逻辑，不需要手动操作DOM，也不用手动处理事件监听器的绑定与解绑，稳定性更高。

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