Question 1

ตัวแปลง HTML เป็น JSX ทำอะไร?

Accepted Answer

มันเปลี่ยนมาร์กอัป HTML ธรรมดาให้เป็น JSX ที่ React เรนเดอร์ได้ วาง HTML ในช่องอินพุตแล้ว JSX ที่เทียบเท่าจะปรากฏในแผงเอาต์พุต อัปเดตสดขณะพิมพ์โดยมีดีเบานซ์สั้น ๆ

Question 2

แอตทริบิวต์ไหนถูกเปลี่ยนชื่อ?

Accepted Answer

class กลายเป็น className, for เป็น htmlFor, tabindex เป็น tabIndex ส่วนแอตทริบิวต์ที่มีขีด เช่น maxlength, colspan, stroke-width จะถูกแปลงเป็นชื่อ camelCase ของ React แต่ data-* และ aria-* จะเหมือนเดิม

Question 3

แอตทริบิวต์ style ถูกแปลงอย่างไร?

Accepted Answer

สตริง CSS อย่าง style="background-color: red; font-size: 12px" จะกลายเป็นออบเจกต์ JavaScript: style={{backgroundColor:'red', fontSize:'12px'}} โดยทุกพรอพเพอร์ตี้ CSS เขียนแบบ camelCase และค่าอยู่ในเครื่องหมายคำพูด

Question 4

void element ถูกจัดการอย่างไร?

Accepted Answer

อิลิเมนต์ที่มีลูกไม่ได้ เช่น img, br, input, hr, meta, link จะถูกจัดรูปเป็นไวยากรณ์ปิดตัวเอง กลายเป็น ตามที่ JSX กำหนด และ div หรือ span ที่ว่างเปล่าก็ปิดแบบเดียวกัน

Question 5

คอมเมนต์ HTML กลายเป็นอะไร?

Accepted Answer

ถูกแปลงเป็นคอมเมนต์ JSX:  กลายเป็น {/* note */} ส่วนลำดับอักขระที่อาจปิดคอมเมนต์ก่อนเวลาจะถูกทำให้ไร้พิษภัย เพื่อให้โค้ดที่ได้คอมไพล์ได้เสมอ

Question 6

เอนทิตีและอักขระพิเศษถูกจัดการอย่างไร?

Accepted Answer

เอนทิตีอย่าง & หรือ &copy; ถูกถอดรหัสเป็นอักขระจริง จากนั้นวงเล็บปีกกาและวงเล็บแหลมจะถูก escape ใหม่แบบที่ JSX ปลอดภัย ข้อความที่มี { } หรือ < จึงแสดงผลถูกต้องโดยไม่ทำคอมโพเนนต์พัง

Question 7

ตัวเลือก function component ทำอะไร?

Accepted Answer

มันห่อมาร์กอัปที่แปลงแล้วด้วยเทมเพลตพร้อมใช้: function Component() { return ( ...JSX ของคุณ... ) } แทน JSX เปล่า เปิดใช้เมื่อต้องการวางโค้ดลงไฟล์ React ได้ทันที

Question 8

HTML ของฉันถูกอัปโหลดไหนหรือเปล่า?

Accepted Answer

เปล่า การพาร์ซเกิดในเบราว์เซอร์ของคุณทั้งหมดด้วย DOMParser ในตัว ไม่มีข้อมูลใดส่งไปเซิร์ฟเวอร์ จึงปลอดภัยกับมาร์กอัปส่วนตัว และเครื่องมือใช้แบบออฟไลน์ได้ด้วย

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

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