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

โฆษณา
เครื่องมือทั้งหมด ฟรี

วาง HTML แล้วได้ React JSX ที่สะอาด — class กลายเป็น className แอตทริบิวต์เป็น camelCase สตริง style กลายเป็นออบเจกต์ และแท็กปิดตัวเอง ทำงานทั้งหมดในเบราว์เซอร์ของคุณ ฟรี

ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — มาร์กอัปของคุณไม่เคยออกจากอุปกรณ์ของคุณ

snippet.html 
1
Component.jsx 

							

							

								{ }
								JSX ของคุณจะปรากฏที่นี่
							

						

					

				

			

		

	


        
                    

		


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

							
HTML to JSX Converter เปลี่ยนมาร์กอัป HTML ธรรมดาให้เป็น JSX ที่พร้อมใช้กับ React แบบเรียลไทม์ มันเปลี่ยน class เป็น className และ for เป็น htmlFor แปลง attribute แบบ kebab-case และ SVG ให้เป็น camelCase แปลง style string แบบ inline ให้เป็นอ็อบเจ็กต์ style ของ JSX และปิดแท็กที่ไม่มีเนื้อหาเองอย่าง img และ br — คือการแก้ไขแบบเดียวกับที่คุณต้องทำด้วยมือ

							
วางสนิปเป็ต ส่วนของหน้าเต็ม หรือมาร์กอัปที่ส่งออกจากเครื่องมือออกแบบ แล้วแผง JSX จะอัปเดตขณะที่คุณพิมพ์พร้อม syntax highlighting ตัวเลือกห่อหุ้มสามารถเปลี่ยนผลลัพธ์ให้เป็น function component ที่มีชื่อ ทำให้ผลลัพธ์นำไปใช้ในโปรเจ็กต์ React ได้ทันทีโดยไม่ต้องแก้ไขเพิ่มเติม

							
ตัวแปลงนี้เป็นเครื่องมือ HTML to JSX แบบ client-side ทั้งหมด: มาร์กอัปของคุณถูกแปลงโดย JavaScript ในเบราว์เซอร์ของคุณและไม่เคยออกจากอุปกรณ์ของคุณ ทำให้ปลอดภัยที่จะใช้กับเทมเพลตที่เป็นกรรมสิทธิ์และหน้าเว็บภายในองค์กร

					
					
วิธีใช้ ตัวแปลง HTML เป็น JSX

			
    
									
  1. วาง HTML ของคุณลงในแผงด้านซ้าย หรือคลิก Sample เพื่อโหลดตัวอย่าง
    2. 
									
  2. สังเกตแผง JSX อัปเดตทันทีขณะที่คุณพิมพ์หรือแก้ไข
    3. 
									
  3. สลับ Wrap in a component และตั้งชื่อ component หากคุณต้องการ function component ที่พร้อมใช้
    4. 
									
  4. คลิก Copy เพื่อคัดลอก JSX หรือ Download เพื่อบันทึกเป็น Component.jsx
    5. 
									
  5. ใช้ Clear เพื่อล้างทั้งสองแผงและแปลงสนิปเป็ตอื่น
    6. 
							

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

			

									

						

							
						

						

							
มันเปลี่ยนชื่อ class เป็น className และ for เป็น htmlFor, แปลง attribute ที่มีขีดกลางเป็น camelCase (รวมถึง attribute ของ SVG), แปลง style string แบบ inline เป็นอ็อบเจ็กต์ style ของ JSX และปิดแท็กที่ไม่มีเนื้อหาเองเช่น img, br และ input เพื่อให้ผลลัพธ์เป็น JSX ที่ถูกต้อง

						

					

									

						

							
						

						

							
ได้ เปิดใช้งาน Wrap in a component และเลือกชื่อ component แล้วเครื่องมือจะสร้าง function component ที่สมบูรณ์ครอบมาร์กอัปที่แปลงแล้ว พร้อมวางลงในโปรเจ็กต์ของคุณหรือดาวน์โหลดเป็นไฟล์ .jsx

						

					

									

						

							
						

						

							
ได้ attribute style เช่น style="margin-top: 10px" จะกลายเป็นอ็อบเจ็กต์ JSX อย่าง style={{marginTop: '10px'}} โดยแต่ละ CSS property จะถูกแปลงเป็น camelCase รวมถึง property ที่มี vendor prefix

						

					

									

						

							
						

						

							
ไม่ การแปลงทำงานทั้งหมดในเบราว์เซอร์ของคุณ ดังนั้นมาร์กอัปของคุณจะไม่ออกจากอุปกรณ์ของคุณ คุณสามารถแปลงเทมเพลตภายในองค์กรและหน้าที่ยังไม่เผยแพร่ได้อย่างปลอดภัย

						

					

									

						

							
						

						

							
ใช่ ฟรีสมบูรณ์ ไม่ต้องมีบัญชี ไม่มีค่าเครดิต และไม่มีการจำกัดจำนวนสนิปเป็ตที่คุณแปลง

						

					

							


						
			


	



	
	

		

		

			แชร์สิ่งนี้
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
					

	



    
	
	

				
เครื่องมือที่เกี่ยวข้อง


					

									

						
							
							
								
									เครื่องสร้างโค้ดจาก JSON
									
								
								เปลี่ยนตัวอย่าง JSON ใดก็ได้เป็น TypeScript, Go, Python, Kotlin หรือ JSON Schema — การอนุมานชนิดข้อมูลทำงานทั้งหมดในเบราว์เซอร์ของคุณ ฟรีและเป็นส่วนตัว
								
																			ฟรี
																	
							
						
					

									

						
							
							
								
									Code Formatter
									
								
								จัดรูปแบบ HTML, CSS และ JavaScript — จัดการย่อหน้าและเพิ่มการขึ้นบรรทัดใหม่เพื่อให้โค้ดที่รกหรือถูกย่ออ่านได้ง่าย
								
																			ฟรี
																	
							
						
					

									

						
							
							
								
									เครื่องแปลง cURL เป็นโค้ด
									
								
								วางคำสั่ง curl แล้วได้โค้ดที่พร้อมรันสำหรับ fetch, Python requests, PHP, Node axios หรือ Go — วิเคราะห์ทั้งหมดในเบราว์เซอร์ของคุณ ฟรี
								
																			ฟรี
																	
							
						
					

									

						
							
							
								
									แปลงโค้ดเป็นรูปภาพ
									
								
								แปลงโค้ดเป็นรูปภาพที่สวยงามและแชร์ได้ — เลือกธีม พื้นหลัง ขอบหน้าต่าง และอื่นๆ
								
																			ฟรี
																	
							
						
					

									

						
							
							
								
									รูปแบบวันที่และเวลาทั่วโลก
									
								
								ดูวิธีการเขียนวันที่และเวลาในแต่ละประเทศทั่วโลก — เลือกประเทศหรือภาษาแล้วเปรียบเทียบรูปแบบได้ทันที
								
																			ฟรี
																	
							
						
					

									

						
							
							
								
									JSON ↔ YAML
									
								
								แปลง JSON เป็น YAML และกลับกัน พร้อมการตรวจสอบ
								
																			ฟรี
																	
							
						
					

							

			







		

			

				

					
					

						
ต้องการความช่วยเหลือ?

						
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา

					

				

				
					รายงานปัญหา
				
			

		

	





        

            

                

                    
                

                

                    

                        
เพิ่มเครื่องมือฟรีนี้ลงในเว็บไซต์ของคุณเอง — คัดลอกและวางโค้ดด้านล่าง