Penukar HTML ke JSX

Iklan
Semua alat Percuma

Tampal HTML dan dapatkan React JSX yang kemas — class menjadi className, atribut ditukar ke camelCase, rentetan style menjadi objek dan tag menutup sendiri. Berjalan sepenuhnya dalam pelayar anda. Percuma.

Semuanya berjalan dalam pelayar anda — markup anda tidak pernah meninggalkan peranti anda.

snippet.html 
1
Component.jsx 

							

							

								{ }
								JSX anda akan muncul di sini
							

						

					

				

			

		

	


        
                    

		


					
Mengenai Penukar HTML ke JSX

							
Penukar HTML ke JSX menukar markup HTML biasa menjadi JSX sedia-React secara masa nyata. Ia menulis semula class kepada className dan for kepada htmlFor, menukar atribut kebab-case dan SVG kepada camelCase, menukar rentetan style sebaris kepada objek style JSX, dan menutup sendiri elemen kosong seperti img dan br — pindaan tepat yang sepatutnya anda buat secara manual.

							
Tampal cebisan, bahagian halaman penuh, atau markup yang dieksport daripada alat reka bentuk, dan panel JSX dikemas kini semasa anda menaip dengan penyerlahan sintaks. Pembalut pilihan menukar output menjadi komponen fungsi bernama, supaya hasilnya boleh terus digunakan dalam projek React tanpa penyuntingan lanjut.

							
Penukar ini adalah alat HTML ke JSX yang sepenuhnya sisi klien: markup anda ditukar oleh JavaScript dalam pelayar anda dan tidak pernah meninggalkan peranti anda, yang menjadikannya selamat digunakan dengan templat proprietari dan halaman dalaman.

					
					
Cara menggunakan Penukar HTML ke JSX

			
    
									
  1. Tampal HTML anda ke dalam panel kiri, atau klik Sample untuk memuatkan contoh.
    2. 
									
  2. Perhatikan panel JSX dikemas kini serta-merta semasa anda menaip atau menyunting.
    3. 
									
  3. Togol Wrap in a component dan tetapkan nama komponen jika anda mahu komponen fungsi sedia siap.
    4. 
									
  4. Klik Copy untuk mengambil JSX, atau Download untuk menyimpannya sebagai Component.jsx.
    5. 
									
  5. Gunakan Clear untuk menetapkan semula kedua-dua panel dan menukar cebisan lain.
    6. 
							

		
					
Soalan lazim

			

									

						

							
						

						

							
Ia menamakan semula class kepada className dan for kepada htmlFor, camelCase atribut bergaris sempang (termasuk atribut SVG), menukar rentetan style sebaris kepada objek style JSX, dan menutup sendiri tag kosong seperti img, br dan input, supaya output menjadi JSX yang sah.

						

					

									

						

							
						

						

							
Boleh. Aktifkan Wrap in a component dan pilih nama komponen, dan alat ini menjana komponen fungsi lengkap di sekeliling markup yang ditukar, sedia ditampal ke dalam projek anda atau dimuat turun sebagai fail .jsx.

						

					

									

						

							
						

						

							
Ya. Atribut style seperti style="margin-top: 10px" menjadi objek JSX seperti style={{marginTop: '10px'}}, dengan setiap sifat CSS di-camelCase, termasuk sifat berawalan vendor.

						

					

									

						

							
						

						

							
Tidak. Penukaran berjalan sepenuhnya dalam pelayar anda, jadi markup anda tidak pernah meninggalkan peranti anda. Anda boleh menukar templat dalaman dan halaman yang belum dikeluarkan dengan selamat.

						

					

									

						

							
						

						

							
Ya, ia sepenuhnya percuma. Tiada keperluan akaun, tiada kos kredit dan tiada had berapa banyak cebisan yang anda tukar.

						

					

							


						
			


	



	
	

		

		

			Kongsi ini
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
					

	



    
	
	

				
Alat Berkaitan


					

									

						
							
							
								
									Penjana Kod JSON ke Kod
									
								
								Tukar sebarang sampel JSON kepada TypeScript, Go, Python, Kotlin atau JSON Schema — inferens jenis berjalan sepenuhnya dalam pelayar anda. Percuma dan peribadi.
								
																			Percuma
																	
							
						
					

									

						
							
							
								
									Pemformat Kod
									
								
								Cantikkan HTML, CSS dan JavaScript — inden semula dan tambah pemisah baris untuk menjadikan kod yang bersepah atau dipadatkan lebih mudah dibaca.
								
																			Percuma
																	
							
						
					

									

						
							
							
								
									Penukar cURL ke Kod
									
								
								Tampal arahan curl dan dapatkan kod sedia jalan untuk fetch, Python requests, PHP, Node axios atau Go — dihurai sepenuhnya dalam pelayar anda. Percuma.
								
																			Percuma
																	
							
						
					

									

						
							
							
								
									Penukar Kod ke Imej
									
								
								Tukar coretan kod kepada imej cantik yang boleh dikongsi — tema, latar belakang, hiasan tetingkap dan banyak lagi.
								
																			Percuma
																	
							
						
					

									

						
							
							
								
									Format Tarikh & Masa Dunia
									
								
								Lihat bagaimana tarikh dan masa ditulis di seluruh dunia — pilih negara atau bahasa dan bandingkan formatnya serta-merta.
								
																			Percuma
																	
							
						
					

									

						
							
							
								
									JSON ↔ YAML
									
								
								Tukar JSON ke YAML dan sebaliknya, dengan pengesahan.
								
																			Percuma
																	
							
						
					

							

			







		

			

				

					
					

						
Perlukan bantuan?

						
Menemui masalah dengan alat ini? Beritahu pasukan kami.

					

				

				
					Laporkan masalah
				
			

		

	





        

            

                

                    
                

                

                    

                        
Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.