在 NextJs SSR 中操作 DOM onClick

Question

我正在尝试使用 SSR 在 NextJS 上运行一个简单的 DOM 脚本。 我知道 DOM 不适用于 SSR，并且我在变量“菜单”上收到未定义的错误

只是想知道是否有人可以弄清楚我将如何使用钩子来做到这一点？我是 React 和 NextJS 的新手，还没有完全掌握钩子。

<div className={styles.menuCon} onClick={menu()} >
 <div></div>
 <div></div>
 <div></div>
</div>

function menu() {
  var menu = document.getElementsByClassName('menu');
  menu.style.width="400px";
  menu.style.height="400px";

 }

Answer 1

这样做：

<div className={styles.menuCon} onClick={menu} >
 <div></div>
 <div></div>
 <div></div>
</div>

function menu(event) {
  let menu = event.currentTarget;
  menu.style.width="400px";
  menu.style.height="400px";
 }