问如何解决在React中document未定义的问题？

提问于 2024-04-17 09:52:19

回答 0关注 0查看 11

你好想问一下，刚刚接触next.js，之前写的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++
    }
  })
}

react