React+TypeScript中调用getElementById如何确保DOM就绪

我有一个React组件，通过marked库将MD文件转换为HTML并渲染到页面；当点击某一行时，页面需滚动到与headerID匹配的HTML元素。但测试时发现，尽管headerID与目标元素ID完全匹配，nearestHeader始终返回null。想请教：在不使用额外库的前提下，如何确保调用getElementById前文档/DOM已就绪？

现有代码： #

import { marked } from 'marked';

const [content, setContent] = React.useState('');
React.useEffect(() => {
    if (!source) {
        return;
    }
    getRequest(source)
        .then(response => {
            if (!response.ok) {
                return Promise.reject(response);
            }
            return response.text().then(faq => {
                // 将MD转为HTML后更新状态
                setContent(marked(faq));
                const nearestHeader = document.getElementById(headerID);
                if (nearestHeader) {
                    // 滚动到目标header
                    nearestHeader.scrollIntoView(true);
                    setRowClicked(false);
                }
            });
        })
        .catch(e => Dialog.error('Failed to load page.', e));
}, [source, rowClicked]);

解决方案 #

问题核心是：React的setState是异步操作，调用setContent后组件不会立刻重新渲染DOM，此时执行getElementById自然找不到刚生成的元素。以下两种无需额外库的方法可以解决：

方法1：用useEffect监听content状态变化 #

把查找元素和滚动的逻辑拆分到独立的useEffect中，依赖content和headerID，确保DOM更新完成后再执行：

import { marked } from 'marked';

const [content, setContent] = React.useState('');

// 负责加载MD并转换为HTML
React.useEffect(() => {
    if (!source) {
        return;
    }
    getRequest(source)
        .then(response => {
            if (!response.ok) {
                return Promise.reject(response);
            }
            return response.text().then(faq => {
                setContent(marked(faq));
            });
        })
        .catch(e => Dialog.error('Failed to load page.', e));
}, [source, rowClicked]);

// 监听content变化，DOM更新后执行滚动逻辑
React.useEffect(() => {
    if (!content || !headerID) return;
    
    const nearestHeader = document.getElementById(headerID);
    if (nearestHeader) {
        nearestHeader.scrollIntoView(true);
        setRowClicked(false);
    }
}, [content, headerID]);

方法2：用requestAnimationFrame延迟执行 #

利用浏览器的渲染周期，将查找元素的逻辑放到requestAnimationFrame回调中，确保DOM完成更新后再执行：

import { marked } from 'marked';

const [content, setContent] = React.useState('');
React.useEffect(() => {
    if (!source) {
        return;
    }
    getRequest(source)
        .then(response => {
            if (!response.ok) {
                return Promise.reject(response);
            }
            return response.text().then(faq => {
                setContent(marked(faq));
                // 延迟到下一次浏览器渲染时执行
                requestAnimationFrame(() => {
                    const nearestHeader = document.getElementById(headerID);
                    if (nearestHeader) {
                        nearestHeader.scrollIntoView(true);
                        setRowClicked(false);
                    }
                });
            });
        })
        .catch(e => Dialog.error('Failed to load page.', e));
}, [source, rowClicked]);

说明 #

方法1更贴合React的状态驱动设计，逻辑拆分清晰，是推荐的方案；方法2则是利用浏览器API实现延迟，适合快速调整现有代码的场景。两者都能确保在DOM挂载了新生成的HTML元素后，再执行getElementById操作。

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