Output will appear here...
เกี่ยวกับการแปลง HTML เป็น JSX
JSX เป็นส่วนขยายไวยากรณ์ของ JavaScript ที่ใช้ใน React HTML และ JSX ดูคล้ายกันแต่มีความแตกต่างสำคัญ: class กลายเป็น className, for กลายเป็น htmlFor และ inline style ใช้ไวยากรณ์อ็อบเจกต์ เครื่องมือนี้แปลง HTML ของคุณเป็น JSX ที่ถูกต้องโดยอัตโนมัติ
Key Features
- Convert class attributes to className
- Convert for attributes to htmlFor for labels
- Transform style strings to style objects
- Handle event handlers (onclick → onClick)
- Support data-* attributes (pass-through)
- 100% client-side — your code stays private
คำถามที่พบบ่อย
ความแตกต่างระหว่าง HTML กับ JSX คืออะไร?
JSX ต้องใช้ className แทน class, htmlFor แทน for และแอตทริบิวต์ style ต้องเป็นอ็อบเจกต์ที่มีคุณสมบัติ camelCase
จัดการ inline style ได้ไหม?
ได้ สตริง inline style ถูกแปลงเป็นอ็อบเจกต์ JavaScript ที่มีชื่อคุณสมบัติแบบ camelCase
รองรับทุกอิลิเมนต์ HTML ไหม?
ได้ อิลิเมนต์ HTML มาตรฐานทั้งหมดถูกแปลงอย่างถูกต้อง รวมถึงแท็กปิดตัวเองเช่น img, br และ input
ใช้ผลลัพธ์ใน React ได้เลยไหม?
ได้ โค้ด JSX ที่สร้างขึ้นสามารถวางลงในคอมโพเนนต์ React ของคุณได้โดยตรง
ให้คะแนนเครื่องมือนี้
4.5 / 5 · 202 คะแนน
เครื่องมือเพิ่มเติม
SVGSVG เป็น JSX/ReactJSจัดรูปแบบ JS/HTML&;ตัวเข้ารหัส HTML EntityHMHTML to Markdownอัปเดตข่าวสาร
รับเคล็ดลับการพัฒนาและเครื่องมือใหม่ทุกสัปดาห์
ไม่มีสแปม ยกเลิกได้ตลอดเวลา
Enjoy these free tools?
☕Buy Me a Coffeeวิธีใช้งาน
- วางโค้ด HTML ของคุณในช่องป้อนข้อมูล
- เครื่องมือจะแปลงเป็น JSX โดยอัตโนมัติ
- ตรวจสอบแอตทริบิวต์และ style ที่เปลี่ยนแปลง
- คัดลอกโค้ด JSX ไปยังโปรเจกต์ React ของคุณ
กรณีใช้งาน
- ย้ายเทมเพลต HTML เป็นคอมโพเนนต์ React
- แปลงโค้ดจากเว็บเป็น JSX
- โอน HTML ที่มีอยู่ไปยัง React อย่างรวดเร็ว
- เรียนรู้ความแตกต่างระหว่าง HTML และ JSX