ข้ามไปยังเนื้อหา
เครื่องมือแปลงไฟล์

เครื่องมือแปลง HTML เป็น React JSX

แปลงมาร์กอัป HTML เป็น React JSX ด้วย htmltojsx โดยเปลี่ยน class เป็น className, for เป็น htmlFor, สไตล์อินไลน์เป็นออบเจ็กต์ style และแท็กว่างเป็นแท็กปิดในตัว หากมีหลายองค์ประกอบรากจะห่อด้วย fragment

ย้ายเทมเพลต HTML แบบคงที่หรือฟอร์มไปเป็นคอมโพเนนต์ React

HTML

JSX

เหมาะกับงานแบบไหน

  • ย้ายเทมเพลต HTML แบบคงที่หรือฟอร์มไปเป็นคอมโพเนนต์ React
  • แปลงส่วนมาร์กอัปจากเอกสารหรือชุด UI เป็น JSX ที่วางในคอมโพเนนต์ได้

วิธีใช้

  1. วาง HTML ในตัวแก้ไขด้านซ้าย
  2. เปิดการตั้งค่าและเปิดตัวเลือกสร้างฟังก์ชันคอมโพเนนต์ หากต้องการห่อผลลัพธ์ด้วย export const Foo = () => (...)
  3. คัดลอก JSX เปลี่ยนชื่อคอมโพเนนต์ และแทนที่แอตทริบิวต์เหตุการณ์แบบอินไลน์ด้วยตัวจัดการเหตุการณ์ React

HTML

<label class="field" for="email">Email</label>
<input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled>
<!-- hint -->

JSX

<>
  <label className="field" htmlFor="email">
    Email
  </label>
  <input
    id="email"
    type="email"
    tabIndex={1}
    style={{ marginTop: 4, fontSize: 14 }}
    disabled=""
  />
  {/* hint */}
</>

รายละเอียดและข้อจำกัด

แปลงในเบราว์เซอร์และจัดรูปแบบผลลัพธ์ด้วย Prettier (ไม่มีอัฒภาค)

แอตทริบิวต์เหตุการณ์แบบอินไลน์ เช่น onclick="go()" จะคงเดิม ไม่แปลงเป็นตัวจัดการ onClick

แอตทริบิวต์บูลีนจะมีค่าเป็นสตริงว่าง เช่น disabled="" ซึ่ง React มอง "" เป็น false จึงควรเปลี่ยนเป็น disabled หรือ disabled={true}

หากข้อมูลเข้าเป็น SVG หน้าจะแสดงคำแนะนำให้ใช้เครื่องมือแปลง SVG เป็น JSX

FAQ

แปลงสไตล์อินไลน์อย่างไร?

แยกสตริง style เป็นออบเจ็กต์ที่ใช้คีย์ camelCase และเปลี่ยนค่าพิกเซลเป็นตัวเลข เช่น style="margin-top: 4px" เป็น style={{ marginTop: 4 }}

คอมเมนต์ HTML จะเป็นอย่างไร?

คงไว้เป็นคอมเมนต์ JSX เช่น <!-- hint --> กลายเป็น {/* hint */}

ตั้งชื่อคอมโพเนนต์ที่สร้างได้หรือไม่?

ไม่ได้ ตัวเลือกฟังก์ชันจะใช้ชื่อ Foo เสมอ ให้เปลี่ยนชื่อหลังคัดลอก

ข้อกำหนดและแหล่งอ้างอิง