Softonic

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

ขั้นตอน 1 / 2

แปลง: class เป็น className, for เป็น htmlFor, inline styles เป็นอ็อบเจ็กต์ JSX, ปิดแท็ก void อัตโนมัติ, ลบคอมเมนต์ HTML

แปลงเป็น JSX

JSX ดูเหมือน HTML แต่จริงๆ แล้วไม่ใช่ class คือ className, for คือ htmlFor, style คือออบเจกต์ไม่ใช่สตริง และแท็กว่างทุกอันต้องปิดตัวเอง วาง HTML แล้วตัวแปลงนี้จะสร้าง JSX ที่คอมไพล์ผ่านในครั้งแรก คุณจึงย้ายหน้าเว็บการตลาดไปเป็นคอมโพเนนต์ React ได้โดยไม่ต้องไล่ตามข้อผิดพลาดของคอมไพเลอร์เป็นสิบนาที

วิธีแปลง HTML เป็น JSX

  1. 1

    วาง HTML

    มาร์กอัปขนาดหนึ่งคอมโพเนนต์ หรือส่วนหนึ่งของทั้งหน้า

  2. 2

    แปลง

    เครื่องมือจะเปลี่ยนชื่อแอตทริบิวต์อย่าง `class`, `for`, `readonly` เป็นรูปแบบ JSX และแปลง inline style เป็นออบเจกต์

  3. 3

    ตรวจสอบ JSX

    ผลลัพธ์พร้อมวางลงในไฟล์ `.jsx` หรือ `.tsx` ได้ทันที

  4. 4

    คัดลอกแล้ววาง

    โค้ดใช้นิพจน์บรรทัดเดียว จึงเข้ากับคอมโพเนนต์เดิมได้ดี

ทุกความแตกต่างระหว่าง HTML กับ JSX ที่สำคัญ

JSX ไม่ใช่ HTML มันคือนิพจน์ JavaScript ที่คอมไพล์เป็นชุดคำสั่ง React.createElement() ดังนั้นชื่อแอตทริบิวต์จึงเป็นไปตามหลักการของ JavaScript

ตัวแปลงจะจัดการเปลี่ยนชื่อที่พบบ่อยที่สุดให้อัตโนมัติ รายการทั้งหมดด้านล่างคือข้อมูลอ้างอิงที่คุณต้องใช้เมื่อเขียน JSX ด้วยตัวเอง

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

HTML JSX หมายเหตุ
class className class เป็นคำสงวนใน JS
for htmlFor for เป็นคำสงวน
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref เนมสเปซแบบโคลอนถูกทำให้แบน
aria-label aria-label ARIA คงเครื่องหมายขีดไว้
data-* data-* แอตทริบิวต์ data คงเครื่องหมายขีดไว้

แอตทริบิวต์ style

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

ค่าตัวเลขที่ไม่มีหน่วยจะกลายเป็นพิกเซล ส่วนเปอร์เซ็นต์และค่าที่ไม่มีหน่วยอย่าง flex ให้เก็บเป็นสตริง

องค์ประกอบว่างที่ปิดตัวเอง

HTML อนุญาตให้ <br> และ <input> ไม่มีแท็กปิด ส่วน JSX กำหนดให้ต้องเป็น <br /> และ <input /> ทุกองค์ประกอบต้องปิดอย่างชัดเจน

คอมเมนต์

คอมเมนต์ HTML (<!-- -->) ใช้ไม่ได้ในเนื้อหาของ JSX ตัวแปลงนี้จะลบคอมเมนต์ออก หากต้องการเก็บโน้ตไว้ ให้เขียนเองในรูปแบบ {/* คอมเมนต์บล็อก JavaScript */}

แอตทริบิวต์บูลีน

HTML: <input checked> (หรือ <input checked="checked">)

JSX: <input checked={true} /> หรือเพียงแค่ <input checked /> อย่าส่งสตริง “true”

ทางออกฉุกเฉิน

  • ชิ้นส่วน HTML ที่ไม่น่าเชื่อถือสามารถแสดงผลด้วย dangerouslySetInnerHTML={{ __html: ... }} ซึ่งออกแบบให้ดูน่าเกลียดโดยตั้งใจ เพื่อไม่ให้อยากใช้
  • แอตทริบิวต์ data-* แบบกำหนดเองยังคงอยู่เหมือนเดิม ส่วนแอตทริบิวต์ที่ไม่ได้มาตรฐานจะถูกส่งผ่านไป แต่ในโหมดพัฒนา React อาจแสดงคำเตือน

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

แอตทริบิวต์ SVG อย่าง stroke-width ต้องเขียนเป็น camelCase (strokeWidth) ใน JSX และทุกแท็กต้องปิดตัวเอง ตัวแปลงจะปิดแท็ก void ภายใน SVG ให้เองและแปลงชื่อคุณสมบัติในสตริงสไตล์เป็น camelCase แต่จะไม่เปลี่ยนชื่อแอตทริบิวต์ SVG คุณจึงต้องแก้ stroke-width เป็น strokeWidth ด้วยตัวเอง สำหรับไอคอนแบบใช้ครั้งเดียว วิธีที่สะอาดที่สุดคือบันทึกไอคอนเป็นไฟล์ SVG แล้วนำเข้าเป็นคอมโพเนนต์ผ่าน svgr

ใช่ครับ ทั้ง JSX และ TSX ใช้ className ข้อยกเว้นเดียวคือภายใน dangerouslySetInnerHTML ซึ่งสตริง HTML ดิบจะคง class ไว้เพราะถูกแทรกลงใน DOM ตามเดิม

ไม่ครับ เอาต์พุตเป็นเพียง JSX fragment เท่านั้น ไม่มี wrapper export default function และไม่มี type annotation ให้วางลงในไฟล์ .jsx หรือ .tsx แล้วเพิ่ม props, type และ wrapper เอง class ยังคงถูกแปลงเป็น className ซึ่งตรงกับที่ TSX คาดหวังพอดี

จะถูกส่งผ่านไปโดยไม่เปลี่ยนแปลง ตัวแปลงไม่เปลี่ยนชื่อตัวจัดการอีเวนต์ ดังนั้นให้เปลี่ยน onclick เป็น onClick และแทนที่ค่าสตริงด้วยฟังก์ชันจริง เช่น onClick={() => doThing()} คุณต้องนิยามฟังก์ชัน doThing ในสโคปของคอมโพเนนต์

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

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

เครื่องมือนี้มีให้บริการในภาษาอื่น