ตัวแปลง HTML เป็น JSX

แปลง HTML เป็น JSX โดยอัตโนมัติ จัดการ class เป็น className, แอตทริบิวต์ style และแท็กปิดตัวเอง

HTML

JSX

เกี่ยวกับการแปลง HTML เป็น JSX

JSX เป็นส่วนขยายไวยากรณ์ของ JavaScript ที่ใช้ใน React HTML และ JSX ดูคล้ายกันแต่มีความแตกต่างสำคัญ: class กลายเป็น className, for กลายเป็น htmlFor และ inline style ใช้ไวยากรณ์อ็อบเจกต์ เครื่องมือนี้แปลง HTML ของคุณเป็น JSX ที่ถูกต้องโดยอัตโนมัติ

𝕏 Twitter in LinkedIn

ให้คะแนนเครื่องมือนี้

4.5 / 5 · 202 คะแนน

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

SVGSVG เป็น JSX/React JSจัดรูปแบบ JS/HTML &;ตัวเข้ารหัส HTML Entity HMHTML to Markdown

อัปเดตข่าวสาร

รับเคล็ดลับการพัฒนาและเครื่องมือใหม่ทุกสัปดาห์

ไม่มีสแปม ยกเลิกได้ตลอดเวลา

Enjoy these free tools?

☕Buy Me a Coffee

วิธีใช้งาน

วางโค้ด HTML ของคุณในช่องป้อนข้อมูล
เครื่องมือจะแปลงเป็น JSX โดยอัตโนมัติ
ตรวจสอบแอตทริบิวต์และ style ที่เปลี่ยนแปลง
คัดลอกโค้ด JSX ไปยังโปรเจกต์ React ของคุณ

กรณีใช้งาน

ย้ายเทมเพลต HTML เป็นคอมโพเนนต์ React
แปลงโค้ดจากเว็บเป็น JSX
โอน HTML ที่มีอยู่ไปยัง React อย่างรวดเร็ว
เรียนรู้ความแตกต่างระหว่าง HTML และ JSX

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

ความแตกต่างระหว่าง HTML กับ JSX คืออะไร?

JSX ต้องใช้ className แทน class, htmlFor แทน for และแอตทริบิวต์ style ต้องเป็นอ็อบเจกต์ที่มีคุณสมบัติ camelCase

จัดการ inline style ได้ไหม?

ได้ สตริง inline style ถูกแปลงเป็นอ็อบเจกต์ JavaScript ที่มีชื่อคุณสมบัติแบบ camelCase

รองรับทุกอิลิเมนต์ HTML ไหม?

ได้ อิลิเมนต์ HTML มาตรฐานทั้งหมดถูกแปลงอย่างถูกต้อง รวมถึงแท็กปิดตัวเองเช่น img, br และ input

ใช้ผลลัพธ์ใน React ได้เลยไหม?

ได้ โค้ด JSX ที่สร้างขึ้นสามารถวางลงในคอมโพเนนต์ React ของคุณได้โดยตรง