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

Question

你好想问一下，刚刚接触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

Answer 1

let img: document.getElementById("admire");// 这里的:应该是=吧

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

Answer 2

浏览器里才能执行的代码，放到单独的 client 组件里，用 'use client' 标记出来。

Answer 3

建议先看看文档 https://react.dev/learn/referencing-values-with-refs