React项目出现ReferenceError: divRef is not defined运行时错误求助

问题根源 #

报错核心有两个原因：

• 你在scriptContent字符串脚本里直接引用了组件内部的divRef变量，但这段脚本会被插入到全局环境执行，组件内部变量在全局作用域中无法访问，所以会触发divRef未定义的错误。
• useEffect在组件首次渲染时就会执行，此时可能组件还未完成挂载，divRef.current会是null，直接操作也会引发异常。

修复代码示例 #

import { useRef, useEffect } from 'react';

// 组件内部代码
const divRef = useRef(null);

useEffect(() => {
  // 给目标div设置唯一ID，让全局脚本可以获取到它
  const targetContainerId = 'ad-host-container';
  if (divRef.current) {
    divRef.current.id = targetContainerId;
  }

  const scriptContent = `
    if (typeof atOptions === 'undefined') {
      var atOptions = {
        'key' : 'KEY_VALUE',
        'format' : 'iframe',
        'height' : 250,
        'width' : 300,
        'params' : {}
      };
      var script = document.createElement('script');
      script.src = (location.protocol === 'https:' ? 'https' : 'http') + '://babinjectbother.com/KEY_VALUE/invoke.js';
      // 通过ID获取目标元素，避免引用组件内部变量
      const targetDiv = document.getElementById('${targetContainerId}');
      if (targetDiv) {
        targetDiv.appendChild(script);
      }
    }
  `;

  const scriptElement = document.createElement('script');
  scriptElement.innerHTML = scriptContent;

  // 先判断ref是否绑定到真实DOM，再执行挂载操作
  if (divRef.current) {
    divRef.current.appendChild(scriptElement);
  }

  return () => {
    // 清理时同样要做空值校验
    if (divRef.current && divRef.current.contains(scriptElement)) {
      divRef.current.removeChild(scriptElement);
    }
  };
}, []);

// 注意：return中必须确保ref绑定到真实DOM元素
// return <div ref={divRef}></div>;

关键修复点 #

• 用DOM元素ID替代组件内部的divRef，让全局脚本通过document.getElementById获取目标元素，避免跨作用域引用变量。
• 所有操作divRef.current的位置都加上空值判断，确保组件挂载完成后再执行DOM操作。
• 绝对不要在字符串化的脚本代码中直接引用组件内部变量，这类代码会脱离组件作用域执行。

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