Softonic

Bộ chuyển đổi HTML sang JSX

Bước 1 / 2

Chuyển: class thành className, for thành htmlFor, style nội tuyến thành object JSX, tự đóng thẻ rỗng, xóa chú thích HTML.

Chuyển sang JSX

JSX trông giống HTML nhưng thực ra không phải: class là className, for là htmlFor, style là object chứ không phải chuỗi, và mọi thẻ rỗng phải tự đóng. Dán HTML vào, bộ chuyển đổi này sẽ tạo ra JSX biên dịch thành công ngay lần đầu, giúp bạn đưa một trang marketing vào component React mà không phải mất mười phút truy lỗi trình biên dịch.

Cách chuyển HTML sang JSX

  1. 1

    Dán HTML

    Markup của một component, hoặc một đoạn nguyên vẹn của trang.

  2. 2

    Chuyển đổi

    Công cụ đổi tên các thuộc tính như `class`, `for`, `readonly` sang dạng viết của JSX và chuyển inline style thành object.

  3. 3

    Xem lại JSX

    Kết quả sẵn sàng để dán vào tệp `.jsx` hoặc `.tsx`.

  4. 4

    Sao chép và dán vào

    Mã dùng các biểu thức một dòng nên rất dễ lồng vào component hiện có.

Từng khác biệt HTML sang JSX đáng lưu ý

JSX không phải HTML. Đó là biểu thức JavaScript được biên dịch thành các lệnh gọi React.createElement(), nên tên thuộc tính tuân theo quy ước của JavaScript.

Bộ chuyển đổi tự động xử lý các thay đổi tên phổ biến nhất. Danh sách đầy đủ bên dưới là tài liệu tham khảo bạn cần khi tự viết JSX.

Đổi tên thuộc tính

HTML JSX Ghi chú
class className class là từ dành riêng trong JS
for htmlFor for là từ dành riêng
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Không gian tên dùng dấu hai chấm được làm phẳng
aria-label aria-label ARIA giữ nguyên dấu gạch nối
data-* data-* Thuộc tính data giữ nguyên dấu gạch nối

Thuộc tính style

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

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

Giá trị số không có đơn vị sẽ thành pixel; giữ chuỗi cho phần trăm và giá trị không có đơn vị như flex.

Phần tử rỗng tự đóng

HTML cho phép <br> và <input> không có thẻ đóng. JSX yêu cầu <br /> và <input />, mọi phần tử phải được đóng tường minh.

Chú thích

Chú thích HTML (<!-- -->) không hợp lệ trong phần thân JSX. Bộ chuyển đổi này sẽ loại bỏ chúng; nếu muốn giữ lại ghi chú, bạn hãy tự viết dưới dạng {/* Chú thích khối JavaScript */}.

Thuộc tính boolean

HTML: <input checked> (hoặc <input checked="checked">)

JSX: <input checked={true} /> hoặc đơn giản là <input checked />. Đừng bao giờ truyền chuỗi “true”.

Lối thoát

  • Các đoạn HTML không đáng tin cậy có thể hiển thị bằng dangerouslySetInnerHTML={{ __html: ... }}, cố tình xấu xí để khuyến khích không dùng.
  • Thuộc tính data-* tùy chỉnh giữ nguyên; thuộc tính không chuẩn vẫn được truyền qua nhưng có thể kích hoạt cảnh báo của React ở chế độ phát triển.

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

Các thuộc tính SVG như stroke-width phải viết theo dạng camelCase (strokeWidth) trong JSX và mọi thẻ phải tự đóng. Bộ chuyển đổi tự đóng các thẻ void bên trong SVG và chuyển tên thuộc tính trong chuỗi style sang camelCase, nhưng không đổi tên thuộc tính SVG; bạn hãy tự sửa stroke-width thành strokeWidth. Với biểu tượng dùng một lần, cách sạch nhất là lưu biểu tượng thành tệp SVG rồi import làm component qua svgr.

Có, cả JSX và TSX đều dùng className. Ngoại lệ duy nhất là bên trong dangerouslySetInnerHTML, nơi chuỗi HTML thô giữ nguyên class vì nó được chèn nguyên trạng vào DOM.

Không. Đầu ra chỉ là đoạn JSX, không có wrapper export default function và không có chú thích kiểu. Hãy dán nó vào tệp .jsx hoặc .tsx của bạn và tự thêm props, kiểu và wrapper. class vẫn được đổi thành className, đúng như TSX mong đợi.

Chúng được truyền nguyên vẹn, không thay đổi. Bộ chuyển đổi không đổi tên trình xử lý sự kiện, vì vậy hãy sửa onclick thành onClick và thay chuỗi bằng một hàm thực sự, ví dụ onClick={() => doThing()}. Bạn vẫn cần định nghĩa hàm doThing trong phạm vi component của mình.

Công cụ liên quan

Bảng tham chiếu ASCII

Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.

Tham chiếu ký tự HTML

Danh sách có thể tìm kiếm các thực thể HTML, mã tên và mã số tương ứng của chúng, cùng chức năng sao chép chỉ với một cú nhấp cho các ký tự đặc biệt và biểu tượng.

Bảng tham khảo phím tắt

Tìm phím tắt mặc định theo tài liệu của VS Code, Chrome và Bash dùng GNU Readline trên macOS, Windows và Linux.

Trình định dạng HTML

Định dạng HTML cục bộ trong trình duyệt với thụt lề hai hoặc bốn khoảng trắng. HTML không được tải lên hoặc xác thực.

Bảng tra cứu nhanh Markdown

Tài liệu Markdown thực dụng với bản xem trước thực tế và ví dụ có thể sao chép cho tiêu đề, danh sách, bảng, mã, liên kết, hình ảnh và cú pháp GFM.

Công cụ xác thực số điện thoại

Kiểm tra cấu trúc số theo quốc gia và xem khu vực, loại số cùng các định dạng E.164, quốc tế, quốc gia và RFC 3966.

Công cụ này có phiên bản bằng các ngôn ngữ khác