React函数内引用Div id未定义错误求助

你的代码里直接通过themebox.textContent修改DOM内容，虽然功能能正常运行，但控制台报错"themebox is not defined"，原因是你没有定义themebox变量——你只是给div加了id，但没有通过合法方式获取到这个DOM元素的引用。另外，直接操作DOM不符合React的最佳实践，推荐用状态管理UI变化，下面给出两种解决方法：

方法一：用React的useRef安全操作DOM #

如果一定要保留直接操作DOM的逻辑，应该用useRef钩子获取DOM元素的引用，这是React官方推荐的DOM操作方式：

import React, { useRef } from "react";
import "./profile.css";

const Notifications = () => {
  // 创建ref关联目标DOM元素
  const themeboxRef = useRef(null);

  function changeText() {
    themeboxRef.current.textContent = "Nice";
  }
  function changeText2() {
    themeboxRef.current.textContent = "Fair";
  }

  function changeText3() {
    themeboxRef.current.textContent = "Aggressive";
  }

  function changeText4() {
    themeboxRef.current.textContent = "Threatening";
  }

  return (
    <div className="notification-container">
      <h3>Notifications</h3>

      <div className="notif-picker">
        <p className="Selected" onClick={changeText}>
          Nice😘
        </p>
        <p onClick={changeText2}>Fair🕊</p>
        <p onClick={changeText3}> Aggressive😈</p>
        <p onClick={changeText4}>Threatening🤬</p>
      </div>
      <div className="theme-show-box">
        {/* 将ref绑定到目标div上 */}
        <div className="theme-box" ref={themeboxRef}></div>
      </div>
    </div>
  );
};

export default Notifications;

方法二：用React状态管理（推荐） #

React的核心思想是用状态驱动UI，完全不需要直接操作DOM，这种写法更简洁、更符合React规范：

import React, { useState } from "react";
import "./profile.css";

const Notifications = () => {
  // 定义状态存储要显示的文本
  const [displayText, setDisplayText] = useState("");

  return (
    <div className="notification-container">
      <h3>Notifications</h3>

      <div className="notif-picker">
        {/* 点击时直接更新状态 */}
        <p className="Selected" onClick={() => setDisplayText("Nice")}>
          Nice😘
        </p>
        <p onClick={() => setDisplayText("Fair")}>Fair🕊</p>
        <p onClick={() => setDisplayText("Aggressive")}> Aggressive😈</p>
        <p onClick={() => setDisplayText("Threatening")}>Threatening🤬</p>
      </div>
      <div className="theme-show-box">
        {/* 直接渲染状态值 */}
        <div className="theme-box">{displayText}</div>
      </div>
    </div>
  );
};

export default Notifications;

补充说明 #

你原来的代码能运行是因为部分浏览器会自动把DOM元素的id作为全局变量挂载，但这是非标准行为，在React开发环境中不被认可，所以控制台会抛出错误，这种写法也容易导致变量冲突等问题，强烈建议改用上面的两种规范写法。

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