Next.js中替代document操作DOM的方法：新手实操咨询

在Next.js（React框架）中，不推荐直接用document.querySelector这类原生DOM操作控制元素状态，更符合React思想的方式是通过状态管理来控制元素类名。以下是对应你需求的实现方案：

推荐实现：React状态驱动UI #

这是Next.js中最标准的实现方式，完全基于React的状态管理，避免DOM操作带来的同步问题：

'use client'; // Next.js 13+ App Router需添加此标识，Page Router无需

import { useState } from 'react';

export default function TitleTabs() {
  // 用状态记录当前激活的Tab索引，默认选中第一个（索引0）
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  // 定义Tab列表数据，方便批量渲染
  const tabs = ['Tap_1', 'Tap_2', 'Tap_3', 'Tap_4', 'Tap_5'];

  // 处理Tab点击事件
  const handleTabClick = (index) => {
    setActiveTabIndex(index);
  };

  return (
    <div className="container_title">
      <div className="main_title">
        <h1>Title <span>( Global )</span></h1>
        <div className="button_main_title">
          {tabs.map((tabName, index) => (
            <button
              key={index}
              className={`${tabName.toLowerCase()} button ${activeTabIndex === index ? 'active' : ''}`}
              onClick={() => handleTabClick(index)}
            >
              {tabName}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

备选方案：使用DOM操作（不推荐） #

如果因特殊需求必须用原生DOM操作，需通过useRef获取DOM元素，且仅在客户端组件中使用（SSR环境无document对象）：

'use client';

import { useRef, useEffect } from 'react';

export default function TitleTabs() {
  const mainTitleRef = useRef(null);
  const buttonContainerRef = useRef(null);

  useEffect(() => {
    const mainTitle = mainTitleRef.current;
    const buttons = buttonContainerRef.current.querySelectorAll('.button');

    // 绑定点击事件
    const handleClick = (event) => {
      if (event.target.classList.contains('button')) {
        buttons.forEach(btn => btn.classList.remove('active'));
        event.target.classList.add('active');
      }
    };
    mainTitle.addEventListener('click', handleClick);

    // 默认激活第一个按钮
    const firstBtn = buttonContainerRef.current.querySelector('.button:first-child');
    firstBtn.classList.add('active');

    // 组件卸载时移除事件监听，防止内存泄漏
    return () => {
      mainTitle.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div className="container_title">
      <div className="main_title" ref={mainTitleRef}>
        <h1>Title <span>( Global )</span></h1>
        <div className="button_main_title" ref={buttonContainerRef}>
          <button className="Tap_1 button">Tap_1</button>
          <button className="Tap_2 button">Tap_2</button>
          <button className="Tap_3 button">Tap_3</button>
          <button className="Tap_4 button">Tap_4</button>
          <button className="Tap_5 button">Tap_5</button>
        </div>
      </div>
    </div>
  );
}

关键提示 #

• 优先用状态管理：React的核心是数据驱动UI，用useState控制激活状态比直接操作DOM更可靠，也更符合框架设计逻辑。
• 客户端组件声明：Next.js 13+ App Router中，涉及hooks、DOM操作的组件必须加'use client'，否则会触发SSR错误。
• 清理事件监听：用useEffect绑定事件时，务必在返回函数中移除监听，避免组件卸载后残留内存泄漏风险。

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