如何解决在Next.js中document未定义的问题?

作者站长头像
站长
· 阅读数 12

你好想问一下,刚刚接触react,之前写的js在html上可以使用,但是换到这里显示document is not defined,如果在document.getElementById不能用的情况下还有什么办法能够通过id获取到元素?或者应该怎么修改才能正常获取呢?写的屎山如下,请大佬指教qaq

export default function ANIAdmire() {
  
  let count = 0;
  let flag = true;//判断素材状态
  let img: document.getElementById("admire");
  //就是这里出了问题,不是img未定义就是document未定义qwq

  img.style.AnimationPlayState = "paused";//动画初始状态为停止

  function myEndFunction() {
  img.style.animation = null
  } //点击后设置动画为空,保证每次点击动画位置为初始状态

  img.addEventListener("click", function () {
    if (count == 3) {
      //每点击四次更换一次素材
      count = 0;
      if (flag) {
        img.style.animation = "jump 0.7s linear 0s 1,gululu 0.7s linear 0s 1"//动画赋值
        img.src =
          "https://patchwiki.biligame.com/images/umamusume/2/20/o9e5yn4nvsm4lf8zon22bin9l7rrauk.png"
        flag = false//更换素材
        img.addEventListener("webkitAnimationEnd", myEndFunction)//动画播放完成后清空动画
      } else {
        img.style.animation = "jump 0.7s linear 0s 1,gululu 0.7s linear 0s 1" //动画赋值
        img.src =
          "https://patchwiki.biligame.com/images/umamusume/0/08/7u6ud327zarqitc9i49ftudknxzw674.png"
        flag = true //更换素材
        img.addEventListener("webkitAnimationEnd", myEndFunction) //动画播放完成后清空动画
      }
    } else {
      count++
    }
  })
}

1

回复
1个回答
avatar
test
2024-06-19
let img: document.getElementById("admire");// 这里的:应该是=吧

你的函数名不需要首字母大写,因为这不是一个组件,它只是实现了一个点击动画的逻辑。将这个逻辑整理之后放到<image id="admire" />出现的组件中就好了。通过useRef关联到这个dom,然后在useEffect中给这个dom添加事件监听,来实现点击动画的效果。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容