React Vite应用在Chrome中无法获取DOM元素（Firefox中正常）

Chrome与Firefox的差异源于DOMContentLoaded事件触发时机和React组件渲染时序的不一致：

• 在Chrome中，DOMContentLoaded会在React完成组件渲染前触发，此时dummy-Keyboard等DOM元素还未被React挂载到页面中，所以document.getElementById返回null，调用focus()就会抛出错误。
• Firefox的事件触发时序稍晚，刚好赶在React渲染完成后执行，因此能正确获取到DOM元素。

另外你引入的index.js代码直接依赖原生DOM操作，却没有和React的组件生命周期绑定，这是核心问题——原生DOM事件监听无法感知React的渲染进度。

推荐使用React官方推荐的方式来处理DOM操作，替代原生事件监听：

方案1：用React的useEffect钩子（最优） #

把DOM操作逻辑放到组件的useEffect中，确保组件挂载完成后再执行：

// 在对应组件（比如App.jsx或包含dummy-Keyboard的子组件）中
import { useEffect, useRef } from 'react';

function TerminalComponent() {
  // 用ref获取DOM元素，替代getElementById
  const dummyKeyboardRef = useRef(null);
  const userInputRef = useRef(null);
  const terminalOutputRef = useRef(null);

  useEffect(() => {
    // 组件挂载完成后执行
    if (dummyKeyboardRef.current) {
      dummyKeyboardRef.current.focus();
      console.log("keyboard running");
    }
    // 这里可以处理其他DOM逻辑
  }, []); // 空依赖数组确保只执行一次

  return (
    <div>
      <input ref={userInputRef} id="userInput" />
      <textarea ref={terminalOutputRef} id="terminalTextArea" />
      <div ref={dummyKeyboardRef} id="dummy-Keyboard"></div>
    </div>
  );
}

export default TerminalComponent;

方案2：调整原生事件监听的时机（临时兼容） #

如果暂时不想修改React组件，可以把DOM操作逻辑延迟执行，确保React渲染完成：

// index.js中修改keyboard函数
const keyboard = () => {
  // 用setTimeout延迟，利用浏览器事件循环确保React渲染完成
  setTimeout(() => {
    userInput = document.getElementById("userInput");
    terminalOutput = document.getElementById("terminalTextArea");
    const dummyKeyboard = document.getElementById("dummy-Keyboard");
    if (dummyKeyboard) {
      dummyKeyboard.focus();
      console.log("keyboard running");
    }
  }, 0);
};

document.addEventListener("DOMContentLoaded", keyboard);

注意：这种方式是临时方案，依赖浏览器的事件循环，可能在极端场景下仍然失效，不推荐长期使用。

方案3：监听React渲染完成的信号 #

可以在React根组件渲染完成后执行逻辑，修改main.jsx：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 渲染完成后执行DOM操作
root._internalRoot?.renderedNode?.then(() => {
  const dummyKeyboard = document.getElementById("dummy-Keyboard");
  if (dummyKeyboard) {
    dummyKeyboard.focus();
    console.log("keyboard running");
  }
});

注意：_internalRoot是React内部属性，可能在版本更新中变化，存在兼容性风险。

永远不要在React组件外部的原生DOM事件中直接操作React渲染的DOM元素，因为你无法保证React已经完成渲染。React的ref和useEffect是处理DOM操作的标准方式，能在所有浏览器中保持一致的行为。

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