React组件中document.getElementById()失效，求解决方案

核心问题点 #

• 渲染时机错误：你在finally块里调用size_update，但return之后组件还没挂载到DOM上，此时document.getElementById("thisid")肯定找不到元素。React组件返回JSX后只是生成虚拟DOM，真正挂载到页面要等后续渲染阶段。
• 样式修改方式错误：window.getComputedStyle返回的是只读的计算样式对象，不能用setProperty修改样式。要改元素样式，应该直接操作元素的style属性。
• 重复ID隐患：如果Videoframe组件被多次复用，页面会出现多个id="thisid"的元素，违反HTML规范，getElementById只会返回第一个匹配元素。
• React范式违背：React推荐用状态/Props控制UI，而非直接操作DOM，直接操作DOM容易引发UI与状态不一致的问题。

具体解决方案 #

方案1：用React钩子（useRef + useEffect）安全操作DOM

这是最接近你原有逻辑的改法，同时符合React渲染机制：

import { useEffect, useRef } from 'react';

var size_list = [[76.01, 77.81,23.99,11.09,0,11.09],
[69.9, 71.56,20.51,14.22,9.59,14.22],
[64.1,65.63,17.56,17.19,18.34,17.19],
[59.22,60.63,15.15,19.69,25.64,19.69],
[54.79,56.09,12.87,21.95,32.34,21.95]]

const Videoframe = ({src,index,title,before_span,span,after_span,subtitle}) => {
  // 用useRef获取DOM元素，避免重复ID问题
  const videoFrameRef = useRef(null);

  useEffect(() => {
    // useEffect回调在组件挂载后执行，此时DOM已存在
    if (videoFrameRef.current) {
      const element = videoFrameRef.current;
      const sizes = size_list[index];
      // 直接操作元素style属性修改样式
      element.style.height = `${sizes[0]}%`;
      element.style.width = `${sizes[1]}%`;
      element.style.top = `${sizes[2]}%`;
      element.style.right = `${sizes[3]}%`;
      element.style.bottom = `${sizes[4]}%`;
      element.style.left = `${sizes[5]}%`;
    }
  }, [index]); // index变化时重新更新样式

  return(
    <div>
      {/* 用ref绑定元素，替代固定ID */}
      <div className="videoframe" ref={videoFrameRef}>
        <div className="textgroup1">
          <div className="title">{title}</div>
          <div className="main">
            <span>{before_span}</span>
            <i className="better">{span}</i>
            <span> {after_span}</span>
          </div>
          <div className="padding" />
          <div className="subtitle">{subtitle}</div>
        </div>
      </div>
    </div>
  );
}

export default Videoframe;
export { size_list }

方案2：用内联样式（更符合React规范）

完全避免DOM操作，直接通过Props生成样式对象：

var size_list = [[76.01, 77.81,23.99,11.09,0,11.09],
[69.9, 71.56,20.51,14.22,9.59,14.22],
[64.1,65.63,17.56,17.19,18.34,17.19],
[59.22,60.63,15.15,19.69,25.64,19.69],
[54.79,56.09,12.87,21.95,32.34,21.95]]

const Videoframe = ({src,index,title,before_span,span,after_span,subtitle}) => {
  // 根据index生成样式对象
  const frameStyle = {
    height: `${size_list[index][0]}%`,
    width: `${size_list[index][1]}%`,
    top: `${size_list[index][2]}%`,
    right: `${size_list[index][3]}%`,
    bottom: `${size_list[index][4]}%`,
    left: `${size_list[index][5]}%`
  };

  return(
    <div>
      {/* 直接将样式对象传递给style属性 */}
      <div className="videoframe" style={frameStyle}>
        <div className="textgroup1">
          <div className="title">{title}</div>
          <div className="main">
            <span>{before_span}</span>
            <i className="better">{span}</i>
            <span> {after_span}</span>
          </div>
          <div className="padding" />
          <div className="subtitle">{subtitle}</div>
        </div>
      </div>
    </div>
  );
}

export default Videoframe;
export { size_list }

额外注意事项 #

• 移除了原代码中无效的<script>标签，React组件里不需要这样插入脚本，逻辑直接写在组件内部即可。
• 如果size_list是动态变化的，方案1里要把它加入useEffect的依赖数组，或者用useMemo包裹确保引用稳定。

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