แอตทริบิวต์ใดบ้างที่ถูกเปลี่ยนชื่อ?

class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, colspan → colSpan รวมถึง camelCase สำหรับทุก property มาตรฐานของ DOM และ handler on*

สตริง style ถูกแปลงอย่างไร?

ระบบตัดด้วยเครื่องหมายเซมิโคลอน เปลี่ยนแต่ละคุณสมบัติ CSS เป็น camelCase แล้วเขียนผลลัพธ์เป็นอ็อบเจ็กต์ JSX แบบสองวงเล็บปีกกา โดยเก็บ vendor prefix และ custom property เอาไว้

data-* และ aria-* เปลี่ยนไหม?

ไม่เปลี่ยน JSX รับทั้งสองในรูปแบบ kebab โดยตรง ตัวแปลงจึงไม่แตะ จะเปลี่ยนเฉพาะแอตทริบิวต์ DOM มาตรฐาน

ความคิดเห็น HTML ถูกแปลงด้วยไหม?

ใช่ จะกลายเป็น {/* ความคิดเห็น */} เพื่อรักษาเจตนาเดิมโดยไม่ทำให้ parser ของ JSX พัง

แล้วสคริปต์และ handler ในบรรทัดล่ะ?

ตัวแปลงจะเปลี่ยน onclick เป็น onClick และ handler อื่น ๆ แต่เนื้อในของฟังก์ชันยังเป็นสตริง โดยทั่วไปคุณจะเขียนใหม่เป็น callback ของ React ก่อนนำขึ้น production

HTML ของฉันถูกส่งไปที่ใดไหม?

ไม่ การแปลงทำงานในแท็บเบราว์เซอร์นี้ทั้งหมด Toova ไม่เห็นข้อมูลที่คุณวาง ไม่มี analytics ไม่มี log

HTML เป็น JSX — class, for, style, handler

ตัวแปลง HTML → JSX

ออกแบบเพื่อความเป็นส่วนตัว — ทำงานในเบราว์เซอร์ของคุณทั้งหมด

วาง HTML ทางซ้ายแล้วคัดลอก JSX สำหรับ React ทางขวา ตัวแปลงจะเปลี่ยน class เป็น className, for เป็น htmlFor, สตริง style ในบรรทัดเป็นอ็อบเจ็กต์ camelCase และทำให้ void element อย่าง img และ input ปิดตัวเองเพื่อให้ JSX แยกวิเคราะห์ได้

การเปลี่ยนชื่อแอตทริบิวต์และอีเวนต์

React ใช้ชื่อ property ของ DOM แทนแอตทริบิวต์ของ HTML จึงทำให้ tabindex กลายเป็น tabIndex, readonly เป็น readOnly และ colspan เป็น colSpan ส่วน handler ในบรรทัดจะเปลี่ยนจาก onclick เป็น onClick, จาก onmouseover เป็น onMouseOver และทุก handler มาตรฐานก็เป็น camelCase การเปลี่ยนชื่อเฉพาะของ HTML มีสองตัวคือ class → className และ for → htmlFor เพราะทั้งคู่เป็นคำสงวนของ JavaScript

แปลงสตริง style เป็นอ็อบเจ็กต์ camelCase

JSX กำหนดให้ inline style เป็นอ็อบเจ็กต์ และทุกคุณสมบัติ CSS ต้องเป็น camelCase สตริงอย่าง padding: 1rem; background-color: #fff จะถูกแปลงเป็น style={{ padding: '1rem', backgroundColor: '#fff' }} ตัวแปลงรองรับการแปลง kebab-case ไปเป็น camelCase, vendor prefix (-webkit-, -moz-, -ms-) และ CSS custom property (--brand-color คงเดิม โดยใช้คีย์เป็นสตริงหากจำเป็น)

ความเป็นส่วนตัวและกรณีพิเศษ

การแปลงทำงานในฟังก์ชัน JavaScript เดียวภายในแท็บนี้ HTML ของคุณจะไม่ออกจากเบราว์เซอร์ ซึ่งสำคัญเมื่อย้ายมาร์กอัปที่มีข้อมูลของลูกค้า void element ทั้ง 14 ตัว (img, input, br, hr, meta, link, area, base, col, embed, source, track, wbr, param) จะปิดตัวเองในผลลัพธ์เพื่อให้ JSX รับได้ ส่วนแอตทริบิวต์ data- และ aria- จะถูกเก็บไว้ตามเดิมเพราะ JSX ใช้ได้อยู่แล้ว

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

แอตทริบิวต์ใดบ้างที่ถูกเปลี่ยนชื่อ?: class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, colspan → colSpan รวมถึง camelCase สำหรับทุก property มาตรฐานของ DOM และ handler on*
สตริง style ถูกแปลงอย่างไร?: ระบบตัดด้วยเครื่องหมายเซมิโคลอน เปลี่ยนแต่ละคุณสมบัติ CSS เป็น camelCase แล้วเขียนผลลัพธ์เป็นอ็อบเจ็กต์ JSX แบบสองวงเล็บปีกกา โดยเก็บ vendor prefix และ custom property เอาไว้
data-* และ aria-* เปลี่ยนไหม?: ไม่เปลี่ยน JSX รับทั้งสองในรูปแบบ kebab โดยตรง ตัวแปลงจึงไม่แตะ จะเปลี่ยนเฉพาะแอตทริบิวต์ DOM มาตรฐาน
ความคิดเห็น HTML ถูกแปลงด้วยไหม?: ใช่  จะกลายเป็น {/* ความคิดเห็น */} เพื่อรักษาเจตนาเดิมโดยไม่ทำให้ parser ของ JSX พัง
แล้วสคริปต์และ handler ในบรรทัดล่ะ?: ตัวแปลงจะเปลี่ยน onclick เป็น onClick และ handler อื่น ๆ แต่เนื้อในของฟังก์ชันยังเป็นสตริง โดยทั่วไปคุณจะเขียนใหม่เป็น callback ของ React ก่อนนำขึ้น production
HTML ของฉันถูกส่งไปที่ใดไหม?: ไม่ การแปลงทำงานในแท็บเบราว์เซอร์นี้ทั้งหมด Toova ไม่เห็นข้อมูลที่คุณวาง ไม่มี analytics ไม่มี log