javascript - Query Selector Ref in React returns empty NodeList when trying to access children element - Stack Overflow

admin管理员组

文章数量:1349174

I have some content that I dynamically inject onto the DOM using dangerously set inner HTML. When I reference it using a Ref, and query it, the NodeList is always empty, but when I look at the just sidebarContent.current, the NodeList is not empty.

Why does this happen?

const PostSideBar = ({ sidebarContent }) => {
    const [childNodes, setChildNodes] = useState([]);

    useEffect(() => {
        if (sidebarContent.current) {
            const h2Elements = sidebarContent.current.querySelectorAll('h2');
            setChildNodes(h2Elements);
            console.log(h2Elements); // Check the h2 elements
        }
    }, [sidebarContent]);

    return <div>PostSideBar</div>;
};

export default PostSideBar;

The Ref is created in parent component called PostContent, which passes the ref as a prop to reference a component where I inject the html

const PostContentBody = ({ content, ref }) => {
    const [postcontent, setPostContent] = useState<string | null>(null);
    useEffect(() => {
        const fetchMarkdown = async () => {
            const markdowncontent = await parseMarkdown(content);
            setPostContent(markdowncontent.value);
        };
        fetchMarkdown();
    }, [content]);

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

export default PostContentBody;

I have some content that I dynamically inject onto the DOM using dangerously set inner HTML. When I reference it using a Ref, and query it, the NodeList is always empty, but when I look at the just sidebarContent.current, the NodeList is not empty.

Why does this happen?

const PostSideBar = ({ sidebarContent }) => {
    const [childNodes, setChildNodes] = useState([]);

    useEffect(() => {
        if (sidebarContent.current) {
            const h2Elements = sidebarContent.current.querySelectorAll('h2');
            setChildNodes(h2Elements);
            console.log(h2Elements); // Check the h2 elements
        }
    }, [sidebarContent]);

    return <div>PostSideBar</div>;
};

export default PostSideBar;

The Ref is created in parent component called PostContent, which passes the ref as a prop to reference a component where I inject the html

const PostContentBody = ({ content, ref }) => {
    const [postcontent, setPostContent] = useState<string | null>(null);
    useEffect(() => {
        const fetchMarkdown = async () => {
            const markdowncontent = await parseMarkdown(content);
            setPostContent(markdowncontent.value);
        };
        fetchMarkdown();
    }, [content]);

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

export default PostContentBody;

• javascript
• reactjs

Share Improve this question Follow edited 2 days ago Gammacase asked Apr 2 at 4:47 GammacaseGammacase 922 bronze badges New contributor Gammacase is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 1

• 2 This needs details. When and where are the ref's child nodes added? Edit your question to contain a minimal reproducible example – Phil Commented Apr 2 at 6:06

Add a comment  | 

2 Answers 2

Sorted by: Reset to default -1

I will await for more details, but I guess when you console.log(sidebarContent.current), you're simply logging the element itself, which is available immediately after React's render.

The problem arises when you try to query the children of that element, as those children might not be fully rendered yet.

Assuming everything is correct, you can try adding a delay in your useEffect to verify.

I will edit this answer once I get more context.

Please provide more details.

I think the sidebarContent is a ref from useRef. The ref shouldn't be used as deps of useEffect. I will always be the same reference and the react won't rerender. Please try to use useState

本文标签：