React更新DOM后，jQuery无法获取.wpgmp-map-data-container元素

我在React组件中通过dangerouslySetInnerHTML插入了包含类名wpgmp-map-data-container的DOM结构，但调用全局函数wpgmpInitMap用jQuery查询该类元素时，结果始终返回长度0，明明该元素已经存在于DOM中。

相关代码： #

edit.js（React组件）

export default function Edit({ attributes, setAttributes }) {
    const [mapMarkupState, setMapMarkupState] = useState("");

    const fetchMapMarkup = async (id) => {
        try {
            const response = await fetch(
                `${siteurl}/wp-json/wpgmp/${version}/markup/${id}`,
            );
            const markupData = await response.json();
            setMapMarkupState(markupData.map_markup);
        } catch (error) {
            console.error("Error fetching map markup:", error);
        }
    };
    
    useEffect(() => {
        fetchMapMarkup(id);
    }, []);

    useEffect(() => {
        if(mapMarkupState ){
            wpgmpInitMap();
        }
    }, [mapMarkupState]);

    return (
        <>
        <div dangerouslySetInnerHTML={{ __html: mapMarkupState }} />
        </>
    );
}

maps.js（全局jQuery函数）

function wpgmpInitMap() {
    jQuery(document).ready(function($) {
        console.log( 'Length = ',$(".wpgmp-map-data-container").length );
    });
}

问题原因： #

jQuery(document).ready()只会在初始页面DOM加载完成时触发一次。而React是在初始页面加载完成后，通过dangerouslySetInnerHTML动态插入DOM的，此时调用wpgmpInitMap，里面的document.ready回调已经不会再执行了，导致查询代码根本没运行，所以返回长度0。

解决方案： #

直接移除jQuery(document).ready()的包裹，因为调用wpgmpInitMap的时机已经是React完成DOM更新之后，不需要再等待页面加载完成：

修改后的wpgmpInitMap：

function wpgmpInitMap() {
    const $ = jQuery;
    console.log( 'Length = ', $(".wpgmp-map-data-container").length );
}

额外验证（可选）： #

如果还是有问题，可以给React的容器div添加ref，确认DOM确实已经渲染：

// 在Edit组件中添加ref
const mapContainerRef = useRef(null);

useEffect(() => {
    if(mapMarkupState && mapContainerRef.current){
        // 打印容器内的HTML，确认目标元素存在
        console.log(mapContainerRef.current.innerHTML);
        wpgmpInitMap();
    }
}, [mapMarkupState]);

return (
    <div ref={mapContainerRef} dangerouslySetInnerHTML={{ __html: mapMarkupState }} />
);

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