React实现Diprella登录页：原生JS事件致刷新组件消失求方案

直接操作原生DOM（比如document.querySelector）是导致页面刷新后组件消失的核心原因——React靠虚拟DOM管理视图，手动修改DOM会打破它的渲染逻辑，重新渲染时就会出现异常。下面是用React原生API替代的正确方案：

步骤1：用useState控制切换状态（推荐） #

不用直接修改classList，而是用状态变量标记当前是登录还是注册状态，让React自动处理DOM类名：

import { useState } from 'react';

function LoginPage() {
  // 状态变量：标记是否显示注册面板
  const [isSignup, setIsSignup] = useState(false);

  // 切换状态的函数
  const toggleSignup = () => {
    setIsSignup(prevState => !prevState);
  };

  return (
    <div className={`cont ${isSignup ? 's-signup' : ''}`}>
      {/* 直接在按钮上绑定React的onClick事件 */}
      <button className="img-btn" onClick={toggleSignup}>
        切换到{isSignup ? '登录' : '注册'}
      </button>

      {/* 登录面板 */}
      {!isSignup && (
        <div className="login-section">
          <h2>登录</h2>
          {/* 登录表单内容 */}
        </div>
      )}

      {/* 注册面板 */}
      {isSignup && (
        <div className="signup-section">
          <h2>注册</h2>
          {/* 注册表单内容 */}
        </div>
      )}
    </div>
  );
}

export default LoginPage;

步骤2：如果必须操作DOM（复用原有CSS） #

如果你的CSS完全依赖.s-signup类实现切换效果，不想调整逻辑，可以用useRef获取DOM元素，但依然通过React的事件绑定触发：

import { useRef } from 'react';

function LoginPage() {
  // 用useRef获取目标容器元素
  const contRef = useRef(null);

  const toggleSignup = () => {
    // 通过ref安全操作DOM类名
    contRef.current?.classList.toggle('s-signup');
  };

  return (
    <div className="cont" ref={contRef}>
      <button className="img-btn" onClick={toggleSignup}>
        切换面板
      </button>
      {/* 登录/注册表单内容 */}
    </div>
  );
}

export default LoginPage;

原代码出问题的原因 #

1. 原生addEventListener绑定的事件，在组件重新渲染（比如刷新、状态变化）后，之前绑定的元素可能被React重新创建，导致事件失效；手动修改的classList也会被React的虚拟DOM覆盖，引发视图异常。
2. 直接用document.querySelector获取元素，可能在组件挂载前执行（比如写在组件外部），导致获取不到元素；或者在组件卸载后仍保留事件监听，引发内存泄漏和DOM冲突。

用React的状态或useRef配合内置的onClick事件，能让React全程控制DOM的生命周期，避免这类问题。

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