您可以在父组件上设置ref，并使用outerHTML将HTML作为字符串检索。
然后，您可以使用一些时髦的锚工作来下载结果字符串。

const MainComponent = () => {
    const ref = useRef(null);

    const generateHTML = () => {
        const { current: container } = ref;

        // Use outerHTML to retrieve the contents AND the container div.
        const html = container.outerHTML;

        downloadHTML(html);
    };

    const downloadHTML = html => {
        const anchor = document.createElement("a");   
        anchor.style.display = "none";     

        // Setup the download
        anchor.setAttribute(
            "href", 
            `data:text/html;charset=utf-8,${encodeURIComponent(html)}`
        );
        anchor.setAttribute("download", "index.html");

        document.body.appendChild(anchor);

        // Trigger the download
        element.click();
        // Remove the anchor from the page
        document.body.removeChild(anchor);
    };
    
    // Ensure that you use no deps otherwise it'll trigger an infinite loop of downloads.
    useEffect(() => {
        generateHTML();
    }, []);

    return (
        <div ref={ref}>
            {/* Child components go here */}
        </div>
    );
};