Công cụ chuyển đổi HTML sang React JSX

Khi nào nên sử dụng

• Chuyển mẫu HTML tĩnh hoặc biểu mẫu thành một component React.
• Chuyển đoạn mã đánh dấu trong tài liệu hoặc bộ giao diện thành JSX để dán vào component.

Cách sử dụng

1. Dán HTML vào trình soạn thảo bên trái.
2. Nếu cần, mở cài đặt và bật Tạo component hàm để bọc kết quả trong export const Foo = () => (...).
3. Sao chép JSX, đổi tên component và thay các thuộc tính sự kiện nội tuyến bằng trình xử lý sự kiện của React.

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

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

Chi tiết và giới hạn

Quá trình chuyển đổi chạy trong trình duyệt và kết quả được định dạng bằng Prettier (không có dấu chấm phẩy).

Các thuộc tính sự kiện nội tuyến như onclick="go()" được giữ nguyên, không chuyển thành trình xử lý onClick.

Các thuộc tính boolean nhận một chuỗi rỗng, ví dụ disabled="". React coi "" là false, vì vậy hãy đổi thành disabled hoặc disabled={true}.

Nếu đầu vào là SVG, trang sẽ hiển thị gợi ý dẫn đến công cụ SVG sang JSX.

FAQ

Công cụ liên quan

Đặc tả và tài liệu tham khảo

• Tài liệu React: Viết mã đánh dấu bằng JSX