HTML 轉 JSX 轉換器
所有工具
免費
貼上 HTML 即可獲得乾淨的 React JSX——class 變為 className，屬性轉為駝峰命名，style 字串變為物件，標籤自閉合。完全在你的瀏覽器中執行。免費。
一切都在你的瀏覽器中執行——你的標記永遠不會離開你的裝置。
1
{ }
你的 JSX 將顯示在這裡
關於 HTML 轉 JSX 轉換器
HTML 轉 JSX 轉換器能即時將純 HTML 標記轉成可供 React 使用的 JSX。它會把 class 改寫為 className、for 改寫為 htmlFor，將連字號命名的屬性與 SVG 屬性轉為駝峰式命名，將行內樣式字串轉換成 JSX 樣式物件，並將 img、br 等空元素自動加上自閉合標籤——這些正是您原本得手動修改的地方。
貼上一段程式碼片段、完整的頁面區塊，或從設計工具匯出的標記，JSX 面板會隨著您輸入即時更新，並附有語法高亮。可選的包裝選項會將輸出結果轉成具名的函式元件，讓結果無需進一步編輯就能直接放進 React 專案中。
這個轉換器是完全在用戶端執行的 HTML 轉 JSX 工具：您的標記由瀏覽器中的 JavaScript 轉換，絕不會離開您的裝置，因此使用專有範本與內部頁面也很安全。
如何使用 HTML 轉 JSX 轉換器
- 將 HTML 貼到左側面板，或點擊「範例」載入示例。
- 觀察 JSX 面板隨著您輸入或編輯即時更新。
- 若想要現成的函式元件，可切換「包裝為元件」並設定元件名稱。
- 點擊「複製」取得 JSX，或點擊「下載」將其存為 Component.jsx。
- 使用「清除」重設兩側面板，轉換另一段程式碼片段。
常見問題
它會把 class 改名為 className、for 改名為 htmlFor，將帶連字號的屬性（包含 SVG 屬性）轉為駝峰式命名，將行內樣式字串轉換成 JSX 樣式物件，並將 img、br、input 等空標籤加上自閉合，讓輸出結果成為有效的 JSX。
可以。啟用「包裝為元件」並選擇元件名稱，工具就會在轉換後的標記外產生一個完整的函式元件，可直接貼進您的專案，或下載為 .jsx 檔案。
可以。像 style="margin-top: 10px" 這樣的 style 屬性，會變成 style={{marginTop: '10px'}} 這樣的 JSX 物件，每個 CSS 屬性都會轉為駝峰式命名，包含帶廠商前綴的屬性。
不會。轉換完全在您的瀏覽器中執行，因此您的標記絕不會離開您的裝置。您可以安全地轉換內部範本與尚未發布的頁面。
是的，完全免費。無需帳號、無需消耗點數，轉換次數也沒有限制。
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。