輸入
正在準備工作區…
使用方法
- 貼上 HTML 片段、開啟 UTF-8 檔案或載入「範例」。
- 選擇縮排，然後點選「轉換為 JSX」。
- 檢查產生的標記，再複製或下載。
將 HTML 標記用於 React
從模板複製的 HTML 通常需要修改後才能放入 JSX。常見區別包括 className、htmlFor、自閉合元素以及行內樣式的形式。
工具負責轉換標記結構。元件狀態、事件回呼和應用邏輯仍需在使用產生 JSX 的位置自行編寫。
屬性與樣式轉換
HTML 屬性會映射到 React 形式，包括 className 和 htmlFor。常見 SVG 屬性使用 React 要求的大小寫。
行內 CSS 轉換為 style 物件，結果按 JSX 格式化。字面文字會視需要轉義，不會被當作 JavaScript 表達式。
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>簡化的屬性轉換範例。完整輸出會格式化，並包含 Fragment 包裝。
結構與行為
HTML 片段會先解析再轉換，輸出在適當位置使用 Fragment 包裝和自閉合語法。
script 元素和行內事件屬性會被移除。這不會將其行為轉換為 React 回呼，也不保證剩餘所有 URL 和樣式都適用於你的應用。
整合結果
將 JSX 複製到元件的渲染或 return 表達式中。請手動恢復行為並檢查行內樣式，尤其是 style 物件無法完整表示的重複備援宣告或 !important 規則。
文字輸入上限 1 MiB。CSS 與 HTML 轉換在工作執行緒中執行，限時 30 秒。顏色工具使用 sRGB；產生的樣式僅供預覽，需要在您的版面配置中測試。
常見問題
會產生完整 React 元件嗎？
不會。工具僅產生 JSX 標記，元件外層、匯入、資料和行為需要在專案中加入。
script 和 onclick 屬性會怎樣處理？
script 元素及行內事件屬性會被移除，不會執行其程式碼，也不會翻譯成 React 事件處理常式。
文字中的大括號為什麼仍然顯示為文字？
輸入按 HTML 解析，字面大括號會為 JSX 轉義，而非作為表達式求值。
行內樣式能完全還原嗎？
常見宣告會轉換為 React 樣式屬性。但 JavaScript style 物件不能始終忠實表示重複備援宣告與 !important。
可以轉換 SVG 標記嗎？
常見 SVG 屬性會映射為 React 名稱。請在元件中測試輸出，包括 ID、引用和應用特有屬性。