Nhà phát triển / React

Bộ chuyển đổi HTML sang JSX

Chuyển HTML thành JSX cho React: đổi class thành className, kiểu nội tuyến thành đối tượng, đóng các phần tử rỗng, thoát dấu ngoặc nhọn và chú thích; tùy chọn bọc kết quả trong một component.

Bộ chuyển đổi HTML sang JSX: HTML được phân tích thành các phần tử, vì vậy các thuộc tính được đổi tên để dùng với React (class, for, tabindex, readonly, maxlength và các thuộc tính khác), kiểu được chuyển thành đối tượng với các khóa camelCase, còn những phần tử rỗng như <br> và <img> được đóng lại. Dấu ngoặc nhọn và dấu ngoặc nhọn góc trong văn bản được thoát, chú thích trở thành {/* */}, còn các giá trị biểu mẫu trở thành defaultValue và defaultChecked để các trường vẫn có thể chỉnh sửa. Kết quả đầu ra của các trang kiểm thử biên dịch được dưới dạng TSX. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.

Danh mục
Công cụ lập trình viên
Lượt chạy
Trong trình duyệt của bạn
Chi phí
Miễn phí · không cần đăng ký
Trạng thái khả dụng
Sẵn sàng sử dụng
HTML sang JSXXử lý cục bộ

Chạy hoàn toàn trong trình duyệt của bạn

  • Đã xóa onclick="send()" trên <button>: hãy viết dưới dạng một hàm, chẳng hạn như onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

Các thuộc tính được đổi tên để dùng với React (class thành className, for thành htmlFor, tabindex thành tabIndex), kiểu dáng được chuyển thành đối tượng, các phần tử rỗng và phần tử void được đóng, chú thích được chuyển thành {/* */}, còn giá trị biểu mẫu được chuyển thành defaultValue để các trường vẫn có thể chỉnh sửa.

Sau khi chuyển đổi

Hãy chuyển phần mã đánh dấu lặp lại thành các component nhận props, thay văn bản cố định bằng các biến trong dấu ngoặc nhọn và chuyển các kiểu nội tuyến vào các lớp CSS hoặc hệ thống định kiểu của bạn, vì các đối tượng style được tạo lại trong mỗi lần kết xuất.

Đối với biểu tượng SVG, SVG sang JSX tạo một component truyền tiếp các props; để xóa nhận xét và khoảng trắng thừa trước, hãy dùng trình thu nhỏ HTML.

Những khác biệt dễ gây nhầm lẫn

JSX cần một phần tử gốc duy nhất, vì vậy nhiều phần tử sẽ được bọc trong một fragment (<>…</>). Mọi phần tử phải được đóng, tên thuộc tính dùng camelCase, và văn bản chứa { hoặc } phải được viết thành {"{"}, việc này sẽ được bộ chuyển đổi thực hiện cho bạn.

Cách sử dụng

  1. Dán HTML, từ một phần tử đơn lẻ đến toàn bộ một phần của trang.
  2. Tùy chọn bọc kết quả trong một component có tên.
  3. Sao chép JSX và viết lại mọi trình xử lý sự kiện nội tuyến được liệt kê trong cảnh báo.

Quyền riêng tư và giới hạn

HTML được chuyển đổi trong trình duyệt của bạn và không bao giờ được tải lên.

Công cụ liên quan

SVG sang JSXHTML MinifierBộ mã hóa HTML

Câu hỏi thường gặp

Tại sao các thuộc tính onclick bị xóa?

Trong HTML, chúng là các chuỗi mã; trong React, chúng phải là các hàm. Bộ chuyển đổi liệt kê từng thuộc tính để bạn viết lại, chẳng hạn onclick="save()" thành onClick={save}.

Tại sao value trở thành defaultValue?

Thuộc tính value trong React khiến trường trở thành trường được kiểm soát, nên bạn không thể nhập vào đó nếu không có trình xử lý onChange; defaultValue đặt văn bản ban đầu và giữ cho trường có thể chỉnh sửa.

Công cụ có xử lý SVG không?

Có: các thuộc tính SVG như stroke-width được đổi thành strokeWidth. Khi chuyển toàn bộ tệp SVG thành một component, công cụ SVG sang JSX sẽ thêm các props.

Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản