快速變身：HTML To React JSX
使用 htmltojsx 將 HTML 標記轉換為 React JSX：class 變為 className，for 變為 htmlFor，行內樣式變為樣式物件，空元素標籤會自閉合。多個根元素會被包在 fragment 中。
把靜態 HTML 模板或表單遷移到 React 元件中。
HTML
JSX
適用場景
- 把靜態 HTML 模板或表單遷移到 React 元件中。
- 把文件或 UI 元件庫中的標記片段轉換成可以貼上到元件裡的 JSX。
使用方法
- 將 HTML 貼上到左側編輯器。
- 可選：開啟設定並開啟 Create function component，將輸出包裝為 export const Foo = () => (...)。
- 複製 JSX，重新命名元件，並把行內事件屬性替換為 React 事件處理函式。
HTML
<label class="field" for="email">Email</label> <input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled> <!-- hint -->
JSX
<>
<label className="field" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
tabIndex={1}
style={{ marginTop: 4, fontSize: 14 }}
disabled=""
/>
{/* hint */}
</>功能與限制
轉換在瀏覽器中進行，輸出使用 Prettier 格式化（不帶分號）。
像 onclick="go()" 這樣的行內事件屬性會原樣保留，不會轉換為 onClick 處理函式。
布林屬性會得到空字串，例如 disabled=""。React 會把 "" 視為 false，因此請改為 disabled 或 disabled={true}。
如果輸入是 SVG，頁面會提示改用 SVG 轉 JSX。
FAQ
行內樣式如何轉換？
樣式字串會被解析為鍵名為 camelCase 的物件，畫素值變為數字：style="margin-top: 4px" 會變為 style={{ marginTop: 4 }}。
HTML 註釋會怎樣處理？
會保留為 JSX 註釋，例如 <!-- hint --> 會變為 {/* hint */}。
能給生成的元件命名嗎？
不能。函式選項始終使用名稱 Foo。請在複製後重命名。