如何将Vanilla JS代码适配到React？现有代码报错求助

为什么你的原生代码会报错？ #

1. DOM渲染时机问题：React组件渲染是异步的，直接在组件顶层运行这段代码时，.img__btn和.cont元素还没挂载到DOM树上，document.querySelector会返回null，调用addEventListener自然会抛出错误。
2. 不符合React范式：React提倡状态驱动DOM更新，直接操作DOM会绕过React的状态管理，容易导致UI和状态不一致。另外你原代码里的document.querySelector(".cont.")多了个多余的点，这也会导致找不到元素。

推荐解决方案：用React状态控制类名（标准做法） #

完全抛弃原生DOM操作，用React状态控制类名，这是React的最佳实践：

import { useState } from 'react';

function AuthComponent() {
  // 用状态标记是否处于注册模式
  const [isSignupMode, setIsSignupMode] = useState(false);

  // 点击按钮切换状态
  const toggleSignupMode = () => {
    setIsSignupMode(prevState => !prevState);
  };

  return (
    <div className={`cont ${isSignupMode ? 's--signup' : ''}`}>
      <button className="img__btn" onClick={toggleSignupMode}>
        切换登录/注册
      </button>
      {/* 组件其他内容 */}
    </div>
  );
}

React会根据isSignupMode的状态自动更新.cont的类名，不需要手动操作DOM，也不会出现找不到元素的问题。

备选方案：用Ref和useEffect处理原生DOM操作（兼容旧代码） #

如果一定要复用原生JS逻辑，需要确保DOM元素已挂载，用useRef获取元素引用，结合useEffect在组件挂载后添加事件监听：

import { useEffect, useRef } from 'react';

function AuthComponent() {
  // 获取.cont和.img__btn的DOM引用
  const contElement = useRef(null);
  const imgBtnElement = useRef(null);

  useEffect(() => {
    const handleBtnClick = () => {
      // 先判断元素是否存在，避免报错
      if (contElement.current) {
        contElement.current.classList.toggle('s--signup');
      }
    };

    const btn = imgBtnElement.current;
    if (btn) {
      btn.addEventListener('click', handleBtnClick);
      // 组件卸载时移除事件监听，防止内存泄漏
      return () => {
        btn.removeEventListener('click', handleBtnClick);
      };
    }
  }, []); // 空依赖数组，只在组件挂载时执行一次

  return (
    <div ref={contElement} className="cont">
      <button ref={imgBtnElement} className="img__btn">
        切换登录/注册
      </button>
      {/* 组件其他内容 */}
    </div>
  );
}

注意：必须在useEffect的清理函数里移除事件监听，防止组件卸载后内存泄漏。同时修正原代码中.cont.的多余点，改成.cont。

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