ตัวแปลง HTML เป็น JSX สำหรับมาร์กอัปพร้อมใช้กับ React
ตัวแปลง HTML เป็น JSX นี้เปลี่ยนมาร์กอัป HTML ที่วางไว้เป็น JSX โดยอัปเดตแอตทริบิวต์และสไตล์อินไลน์ให้เป็นไวยากรณ์ React เปลี่ยน class เป็น className, for เป็น htmlFor แปลงสตริงสไตล์เป็นอ็อบเจกต์ และทำให้เอลิเมนต์ปิดตัวเองตามความเหมาะสม คุณยังเลือกห่อผลลัพธ์เป็นคอมโพเนนต์ฟังก์ชันของ React ได้ แล้วคัดลอก JSX ที่สร้างขึ้นไปใช้ในงานของคุณ
ตัวแปลง HTML เป็น JSX เขียน HTML ที่วางไว้ใหม่เป็น JSX มีประโยชน์เมื่อคุณต้องการย้ายมาร์กอัปไปยังขั้นตอนงานที่เน้น React อัปเดตชื่อแอตทริบิวต์ แปลงสตริงสไตล์อินไลน์เป็นอ็อบเจกต์ และจัดรูปแบบเอลิเมนต์ให้ปิดตัวเองตามความเหมาะสม คุณยังเลือกห่อผลลัพธ์เป็นคอมโพเนนต์ฟังก์ชันของ React ได้
ระหว่างการแปลง class กลายเป็น className และ for กลายเป็น htmlFor สตริงสไตล์อินไลน์ถูกเขียนใหม่เป็นสไตล์อ็อบเจกต์ และผลลัพธ์นำเสนอเป็น JSX ให้คุณตรวจและคัดลอก ตัวเลือกคอมโพเนนต์ที่มีให้คุณเลือกว่าผลลัพธ์จะห่อด้วยคอมโพเนนต์ฟังก์ชันของ React หรือไม่
HTML กับ JSX เกี่ยวข้องกันแต่ใช้ธรรมเนียมการเขียนมาร์กอัปต่างกันในโค้ด React เช่น JSX ใช้ className แทน class และ htmlFor แทน for และสไตล์อินไลน์ใช้อ็อบเจกต์แทนสตริงสไตล์ของ HTML การแปลง HTML เป็น JSX ช่วยปรับโค้ดให้เข้ากับธรรมเนียมเหล่านั้นโดยไม่ต้องเขียนรายละเอียดเหล่านี้ใหม่ทีละอย่าง
การแปลงทำงานในเบราว์เซอร์ของคุณทั้งหมด ข้อมูลของคุณถูกประมวลผลบนอุปกรณ์ของคุณเองและไม่ถูกอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ หลังจากโหลดหน้าแล้ว เครื่องมือยังใช้งานออฟไลน์ได้ เป็นตัวเลือกที่ใช้งานได้จริงสำหรับนักพัฒนาและวิศวกร DevOps ที่ต้องการเตรียม ตรวจ หรือแชร์โค้ด HTML เป็น JSX
ขั้นตอนที่ 1: วาง HTML ของคุณในช่องป้อนข้อมูล คุณเริ่มจากมาร์กอัปตัวอย่างที่มีแอตทริบิวต์ class, ป้ายกำกับ label, ช่องป้อนข้อมูล input และสไตล์อินไลน์ได้
ขั้นตอนที่ 2: ปรับตัวเลือกที่มีสำหรับผลลัพธ์ที่คุณต้องการ คุณสามารถเลือกว่าจะห่อ JSX เป็นคอมโพเนนต์ฟังก์ชันของ React หรือไม่
ขั้นตอนที่ 3: ตรวจผลลัพธ์และเช็กแอตทริบิวต์ที่แปลงแล้ว สไตล์อ็อบเจกต์ และเอลิเมนต์ที่ปิดตัวเอง
ขั้นตอนที่ 4: คัดลอกผลลัพธ์ JSX ไปใช้ในโค้ด เอกสาร ตั๋วงาน หรือขั้นตอนงานอื่น
กรณีการใช้งาน: ย้ายโค้ด HTML ไปยังระบบหรือโค้ดเบสที่รับ JSX ตัวแปลงอัปเดตแอตทริบิวต์เช่น class และ for เป็นรูปแบบ JSX
กรณีการใช้งาน: ตรวจว่า JSX ที่ได้รับตรงกับต้นฉบับ HTML หรือไม่ การเปรียบเทียบมาร์กอัปที่แปลงแล้วทำให้เห็นความต่างของแอตทริบิวต์และสไตล์อินไลน์ได้ง่ายขึ้น
กรณีการใช้งาน: เตรียมโค้ด JSX สำหรับเอกสาร ตั๋วสนับสนุน หรือข้อความคอมมิต คัดลอกผลลัพธ์ที่แปลงแล้วแทนการเขียนมาร์กอัปใหม่เอง
กรณีการใช้งาน: ตรวจการแปลงก่อนวาง JSX ลงในโค้ด ดูชื่อแอตทริบิวต์ สไตล์อ็อบเจกต์ และเอลิเมนต์ที่ปิดตัวเองที่สร้างขึ้นก่อน
กรณีการใช้งาน: แปลงตัวอย่าง HTML เล็ก ๆ เป็น JSX เพื่อใช้ตอนทำอินเทอร์เฟซ React เลือกตัวเลือกห่อเป็นคอมโพเนนต์ฟังก์ชันหากรูปแบบนั้นเหมาะกับขั้นตอนถัดไปของคุณ
กรณีการใช้งาน: เปลี่ยนโค้ด HTML ที่มีสไตล์อินไลน์เป็น JSX สำหรับโปรเจกต์ที่ใช้ไวยากรณ์ React เครื่องมือแปลงสตริงสไตล์เป็นอ็อบเจกต์เป็นส่วนหนึ่งของผลลัพธ์