ข้ามไปยังเนื้อหา
Numio

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

แปลงมาร์กอัป 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 เสมอ ให้เปลี่ยนชื่อหลังคัดลอก

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