UTILS.
ทำงานในเบราว์เซอร์ 100%

HTML เป็น JSX / React

แปลงส่วน HTML ให้เป็น JSX ที่ถูกต้องสำหรับ React — เปลี่ยนชื่อแอตทริบิวต์ ปิด void tag เอง และเปลี่ยน inline style เป็น style object

— ผลลัพธ์จะแสดงที่นี่ —

เกี่ยวกับเครื่องมือนี้

ตัวแปลง HTML เป็น JSX / React แยกวิเคราะห์ส่วน HTML ด้วย DOMParser ดั้งเดิมของเบราว์เซอร์และ serialize ใหม่เป็น JSX ที่ถูกต้อง โดยแก้ไขทุกอย่างที่ React ต้องการ มันทำงานฝั่งไคลเอนต์ทั้งหมด ดังนั้น markup ที่คุณวางจะอยู่บนเครื่องของคุณ วาง HTML ใดก็ได้ — export จากงานออกแบบ, เทมเพลตอีเมล, สเก็ตช์คอมโพเนนต์ — แล้วได้ JSX ที่คุณนำไปวางในไฟล์ React ได้ทันที

การเขียนใหม่เปลี่ยนชื่อแอตทริบิวต์สงวน (class กลายเป็น className, for กลายเป็น htmlFor), ทำ camelCase กับที่เหลือ — tabindex เป็น tabIndex, maxlength เป็น maxLength, stroke-width เป็น strokeWidth — ขณะที่ปล่อยแอตทริบิวต์ data-* และ aria-* ไว้ไม่แตะต้อง void element อย่าง img, br, input และ hr ถูกทำให้ปิดตัวเอง (<img />), คอมเมนต์ HTML กลายเป็น {/* ... */}, เครื่องหมายปีกกาตรง ๆ ในข้อความถูก escape เป็น {'{'}, และสตริง inline style="a:b;c:d" ถูกแปลงเป็น object style={{ a: 'b', c: 'd' }} ด้วยคีย์ CSS แบบ camelCase แอตทริบิวต์ boolean อย่าง disabled สามารถสร้างแบบเปล่าหรือเป็น ={true} ด้วยตัวสลับ

เลือกผลลัพธ์แบบ fragment — root node หลายตัวถูกห่อใน fragment <>...</> อัตโนมัติ — หรือผลลัพธ์แบบคอมโพเนนต์เต็ม ซึ่งห่อ JSX ใน export default function พร้อมชื่อและการเยื้องที่คุณเลือก (2 ช่องว่าง, 4 ช่องว่าง, หรือแท็บ) ผลลัพธ์พร้อมวาง; เพราะการแยกวิเคราะห์ใช้ DOM จริง การซ้อนที่ผิดรูปจึงถูกทำให้เป็นมาตรฐานแบบเดียวกับที่เบราว์เซอร์ทำ

คำถามที่พบบ่อย

แอตทริบิวต์ใดถูกเปลี่ยนชื่อ?
class กลายเป็น className และ for กลายเป็น htmlFor; แอตทริบิวต์อื่นที่มีขีดกลางหรือสงวนถูกทำ camelCase (tabindex เป็น tabIndex, maxlength เป็น maxLength, stroke-width เป็น strokeWidth) แอตทริบิวต์ data-* และ aria-* ถูกคงไว้ตามที่เขียนทุกประการ
inline style ถูกจัดการอย่างไร?
สตริง style="color:red;font-size:14px" กลายเป็น style={{ color: 'red', fontSize: '14px' }} — พร็อพเพอร์ตี้ CSS แต่ละตัวถูกทำ camelCase และทุกค่าถูกสร้างเป็นสตริง ซึ่งถูกต้องเสมอสำหรับ inline style ของ React
จะเกิดอะไรกับ root element หลายตัว?
JSX ต้องมี root เดียว ดังนั้นเมื่อส่วนของคุณมี top-level node หลายตัว พวกมันจะถูกห่อใน Fragment (<>...</>) โหมดคอมโพเนนต์เต็มจะห่อพวกมันไว้ในนิพจน์ที่คืนค่าในวงเล็บแทน
มันแปลงคอมเมนต์และ void tag ไหม?
ใช่ คอมเมนต์ HTML กลายเป็นคอมเมนต์ JSX {/* ... */} และ void element (img, br, input, hr, meta, link และอื่น ๆ) ถูกเรนเดอร์แบบปิดตัวเองเป็น <img /> ซึ่ง JSX กำหนด

เครื่องมือเพิ่มเติม