在一個 React 專案中想要實作下載 HTML 功能，這份 HTML 是獨立的，與原畫面完全無關，這種狀況下通常是用原生 JS 自己拼湊元素，但 document 原生 API 實在不好用，我也不想用 HTML string 的方式做。

於是我腦筋一轉，我們用 JSX 生成 React Node 然後最後這些 Node 會放到 DOM 上，這不就是 React DOM 的功用嘛，所以代表我能建立一個 Component 然後掛到自己的臨時生成的 Root 元素上，最後生成第一次渲染的 DOM。

這樣一來不僅能解決問題，還能獲得撰寫 JSX 的便利性

import { createRoot } from 'react-dom/client'

const Component = () => {
    return <p>hello world</p>
}

const createHtmlString = () => {
    const root = document.createElement('div');

    // 這裡使用 `Promise` 包裝來確保 React DOM 真的幫我們掛上內容後才取內容。
    Promise.resolve(createRoot(root).render(<Component />)).then(()=>{
        console.log(root.outerHTML)
    })

}