開發者 / React

HTML轉JSX轉換器

將HTML轉換為React適用的JSX：將class改為className、將內嵌樣式轉為物件、閉合空元素、跳脫大括號與註解，還可選擇包裝成元件。

HTML轉JSX轉換器: 工具會將HTML解析為元素，將屬性重新命名以符合React需求（例如class、for、tabindex、readonly、maxlength等），將樣式轉為使用camelCase鍵名的物件，並閉合<br>和<img>等空元素。文字中的大括號與角括號會經過跳脫，註解會轉為{/* */}，表單值則會轉為defaultValue和defaultChecked，讓欄位保持可編輯。測試頁面的輸出可編譯為TSX。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。

分類
開發者工具
使用次數
在瀏覽器中
費用
免費・免註冊
可用狀態
可立即使用
HTML轉 JSX本機處理

全程在瀏覽器中執行

  • 已移除<button>上的onclick="send()"：請將它改寫為函式，例如onClick={() => …}。

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

React 會重新命名屬性（class 改為 className、for 改為 htmlFor、tabindex 改為 tabIndex），樣式會轉為物件，空元素與 void 元素會加上結尾標籤，註解會轉為{/* */}，表單值會轉為 defaultValue，讓欄位保持可編輯。

轉換之後

將重複的標記轉成接收props的元件，把硬編碼文字替換成大括號中的變數，並將內嵌樣式移至CSS類別或你的樣式系統，因為每次呈現時都會重新建立樣式物件。

如要處理SVG圖示，SVG轉JSX會建立能傳遞props的元件；如要先移除註解和多餘空白，請使用HTML壓縮器。

容易造成困惑的差異

JSX需要一個根元素，因此多個元素會包在片段（<>…</>）中。每個元素都必須關閉，屬性名稱採用camelCase，而包含{或}的文字必須寫成{"{"}，這些轉換器都會替你處理。

使用方式

  1. 貼上HTML，內容可以是單一元素，也可以是整個頁面區段。
  2. 選擇是否將結果包裝成命名元件。
  3. 複製JSX，並依照警告中的說明改寫內嵌事件處理常式。

隱私與限制

HTML會在您的瀏覽器中轉換，絕不會上傳。

相關工具

SVG 轉 JSXHTML壓縮器HTML編碼器

常見問題

為什麼onclick屬性會被移除？

在HTML中，它們是程式碼字串；在React中，則必須是函式。轉換器會列出每個屬性，方便您改寫，例如將onclick="save()"改為onClick={save}。

為什麼value會變成defaultValue？

在React中，value屬性會讓欄位變成受控元件，因此沒有onChange處理常式時無法輸入文字；defaultValue會設定起始文字，並讓欄位保持可編輯。

這個工具支援SVG嗎？

支援：stroke-width等SVG屬性會變成strokeWidth。若要將完整SVG檔案轉成元件，SVG轉JSX工具會加入props。

免費工具・使用在瀏覽器中次・免註冊