哪些屬性會被改名?

class → className、for → htmlFor、tabindex → tabIndex、readonly → readOnly、colspan → colSpan,加上所有標準 DOM 屬性與 on* 事件處理函式都會轉成 camelCase。

style 字串如何轉換?

以分號切割,每個 CSS 屬性轉成 camelCase,並輸出為雙花括號的 JSX 物件。廠商前綴與 CSS 自訂屬性會被保留。

data-* 與 aria-* 會變嗎?

不會。JSX 接受 kebab 寫法,所以轉換器不會更動;只有標準 DOM 屬性才會被改名。

HTML 註解會被轉換嗎?

會。會變成 {/* 註解 */},既保留意圖也不會破壞 JSX 解析器。

腳本與內聯事件處理函式呢?

轉換器會把 onclick 改成 onClick 等命名,但函式內容仍是字串。實務上,通常會在正式上線前改寫成真正的 React 回呼。

我的 HTML 會被送往任何地方嗎?

不會。轉換完全在這個瀏覽器分頁內進行;Toova 看不到你貼上的內容 — 沒有分析、沒有日誌,什麼都沒有。

HTML 轉 JSX — class、for、style、handler

HTML → JSX 轉換工具

注重隱私的設計 — 完全在您的瀏覽器中執行

在左側貼上 HTML,即可在右側複製可直接用於 React 的 JSX。轉換器會把 class 改成 className、for 改成 htmlFor、inline 的 style 字串改寫成 camelCase 物件,並讓 img、input 等 void 元素自我閉合,以便 JSX 直接解析。

屬性與事件名稱重新對應

React 使用 DOM 屬性名稱而非 HTML 屬性,因此 tabindex 變成 tabIndex、readonly 變成 readOnly、colspan 變成 colSpan。內聯事件處理函式從 onclick 變成 onClick、onmouseover 變成 onMouseOver,所有標準處理函式皆轉為 camelCase。專屬於 HTML 的兩個改名是 class → className 與 for → htmlFor,因為兩者皆為 JavaScript 保留字。

style 字串轉成 camelCase 物件

JSX 要求 inline style 必須是物件字面值,且每個 CSS 屬性都要 camelCase。padding: 1rem; background-color: #fff 之類字串會被轉成 style={{ padding: '1rem', backgroundColor: '#fff' }}。轉換器處理 kebab-case 轉 camelCase、廠商前綴(-webkit-、-moz-、-ms-)以及 CSS 自訂屬性(--brand-color 保留原樣,必要時以字串作為鍵)。

隱私與邊界情況

轉換在這個分頁的單一 JavaScript 函式中執行,你的 HTML 不會離開瀏覽器,移植含有客戶資料的 markup 時相當實用。HTML 的 14 種 void 元素(img、input、br、hr、meta、link、area、base、col、embed、source、track、wbr、param)在輸出中會自我閉合,讓 JSX 能正常處理;data- 與 aria- 屬性則保持原貌,因為它們在 JSX 中已是合法寫法。

常見問題

哪些屬性會被改名?: class → className、for → htmlFor、tabindex → tabIndex、readonly → readOnly、colspan → colSpan,加上所有標準 DOM 屬性與 on* 事件處理函式都會轉成 camelCase。
style 字串如何轉換?: 以分號切割,每個 CSS 屬性轉成 camelCase,並輸出為雙花括號的 JSX 物件。廠商前綴與 CSS 自訂屬性會被保留。
data-* 與 aria-* 會變嗎?: 不會。JSX 接受 kebab 寫法,所以轉換器不會更動;只有標準 DOM 屬性才會被改名。
HTML 註解會被轉換嗎?: 會。 會變成 {/* 註解 */},既保留意圖也不會破壞 JSX 解析器。
腳本與內聯事件處理函式呢?: 轉換器會把 onclick 改成 onClick 等命名,但函式內容仍是字串。實務上,通常會在正式上線前改寫成真正的 React 回呼。
我的 HTML 會被送往任何地方嗎?: 不會。轉換完全在這個瀏覽器分頁內進行;Toova 看不到你貼上的內容 — 沒有分析、沒有日誌,什麼都沒有。