zh-Hant v
en zh tw

HTML 轉 JSX 工具

將 HTML 轉為 React 元件,處理屬性對映、內聯樣式物件、SVG 名稱及表單預設值。

將標記轉換為 React 元件

貼上 HTML 片段並填寫元件名稱。輸出為預設匯出的函式,使用 Fragment 包裹,可包含多個根節點。class、for 分別對映到 className、htmlFor,並處理 SVG 屬性名和布林屬性。文字及屬性值編碼為字串表示式,文字中的花括號不會被當成程式碼。

內聯 CSS 轉為使用駝峰屬性名和字串值的 React style 物件;CSS 自定義屬性保留 -- 字首。輸入框的 value、checked 分別轉為 defaultValue、defaultChecked,textarea 內容和選中選項轉為 defaultValue。輸出需放入啟用 JSX 編譯的 React 專案。

轉換邊界

HTML 在惰性 template 中解析,不執行輸入指令碼,也不請求輸入中的資源網址。指令碼、嵌入框架、樣式元素、事件屬性及不安全 URL 協議會被省略;註釋和原始排版不會保留。工具用於轉換 HTML,不能解析已有 JSX,也不會遷移完整應用。

React style 物件無法忠實表示內聯 !important,工具會拒絕此類宣告,請移至樣式表。上限為 200,000 輸入字元、20,000 節點、64 層及 1,000,000 輸出字元。整合前請核對連結、樣式和專案自定義元件。

常見問題

為什麼表單值會轉為 defaultValue?

靜態 HTML 的 value 通常表示初始值。React 受控值需要 onChange;使用預設值可以保留可編輯的非受控表單行為,而不憑空生成應用狀態。

頁面會執行生成的元件嗎?

不會,輸出僅作為原始碼顯示,可複製或下載 JSX 檔案。

其他語言