Chuyển HTML sang JSX
Công cụ chuyển HTML sang JSX miễn phí trực tuyến. Dán HTML và nhận ngay JSX React sạch sẽ với className, htmlFor, style camelCase, thẻ tự đóng và chú thích an toàn, tất cả ngay trong trình duyệt.
Công cụ chuyển HTML sang JSX làm gì?
Nó biến markup HTML thông thường thành JSX mà React có thể render. Dán HTML vào vùng nhập, JSX tương ứng sẽ hiện ở bảng kết quả và được cập nhật khi bạn gõ, với khoảng chờ ngắn.
Những thuộc tính nào được đổi tên?
class thành className, for thành htmlFor, tabindex thành tabIndex, các thuộc tính có gạch ngang khác như maxlength, colspan, stroke-width cũng được đổi sang tên camelCase của React. Thuộc tính data-* và aria-* giữ nguyên.
Thuộc tính style được chuyển thế nào?
Chuỗi CSS như style="background-color: red; font-size: 12px" trở thành đối tượng JavaScript: style={{backgroundColor:'red', fontSize:'12px'}}, mọi thuộc tính CSS viết camelCase và giá trị được bọc trong ngoặc kép.
Thẻ void được xử lý ra sao?
Các thẻ không thể có phần con — img, br, input, hr, meta, link và nữa — được chuẩn hóa về cú pháp tự đóng: <img> thành <img />, đúng như JSX yêu cầu. div và span rỗng cũng được đóng tương tự.
Chú thích HTML thì sao?
Chúng được chuyển thành chú thích JSX: <!-- note --> thành {/* note */}. Mọi dãy ký tự có thể kết thúc chú thích sớm đều được vô hiệu để mã tạo ra luôn biên dịch được.
Thực thể và ký tự đặc biệt xử lý thế nào?
Thực thể như & hay © được giải mã thành ký tự thật, sau đó ngoặc nhọn và ngoặc móc được escape lại theo dạng an toàn cho JSX, nên văn bản chứa { } hay < hiển thị đúng mà không làm vỡ component.
Tùy chọn function component để làm gì?
Nó bọc markup đã chuyển trong mẫu dùng ngay: function Component() { return ( ...JSX của bạn... ) } thay vì JSX trần. Bật khi muốn dán đoạn mã thẳng vào file React.
HTML của tôi có được tải lên đâu không?
Không. Việc phân tích chạy hoàn toàn trong trình duyệt bằng DOMParser có sẵn. Không gửi gì lên máy chủ nên markup riêng tư vẫn an toàn, và công cụ hoạt động cả khi offline.
Cách sử dụng Chuyển HTML sang JSX
Chuyển HTML thường thành React JSX dùng được ngay mà không rời khỏi trình duyệt. Mọi thứ được phân tích cục bộ bằng DOMParser tích hợp — mã đánh dấu của bạn không bao giờ bị tải lên.
- Dán HTML vào trình biên tập bên trái; kết quả JSX hiện ở bên phải và cập nhật khi bạn gõ (debounce 300 ms).
- Chọn độ rộng thụt lề ở "Thụt lề" — 2 hoặc 4 dấu cách mỗi cấp lồng nhau.
- Bật "Function component" để bọc kết quả trong function Component() { return ( ... ) }, sẵn sàng dán vào tệp React.
- Dùng Sao chép để lấy kết quả, Ví dụ để nạp mẫu, hoặc Xóa để bắt đầu lại.
class, for và tabindex trở thành className, htmlFor và tabIndex; chuỗi style biến thành đối tượng camelCase; các phần tử rỗng như img hay br được xuất dạng tự đóng — đúng những gì JSX yêu cầu.
Công cụ liên quan
- Trình làm đẹp HTML Định dạng và làm đẹp mã HTML ngay lập tức. Chuyển đổi HTML nén thành mã sạch, dễ đọc. Công cụ trực tuyến miễn phí, không cần đăng ký.
- Chuyển mã thành hình ảnh Chuyển đổi đoạn mã thành hình ảnh có thể chia sẻ với đánh dấu cú pháp, chủ đề tùy chỉnh và trang trí cửa sổ. 100% riêng tư, hoàn toàn trong trình duyệt.
- Kiểm tra Hash Tính toán và xác minh hash MD5, SHA-1, SHA-256, SHA-512 cục bộ
- Máy tính Chmod Máy tính chmod trực tuyến miễn phí để trực quan hóa và tính toán quyền tệp Linux với hộp kiểm. Chuyển đổi ngay lập tức giữa ký hiệu số (755, 644) và tượng trưng (rwxr-xr-x). Hỗ trợ quyền đặc biệt như setuid, setgid, sticky bit.
- Bảng ASCII Tham khảo mã hóa ký tự ASCII đầy đủ với mã thập phân, thập lục phân, bát phân, nhị phân, thực thể HTML và mô tả ký tự. Tìm kiếm và lọc tức thì.
- Trình xem Hex Xem nội dung tệp ở định dạng hex dump với tìm kiếm, điều hướng offset và cuộn ảo
- Tra Cứu Loại MIME Tìm loại MIME theo phần mở rộng tệp ngay lập tức hoặc tra cứu phần mở rộng theo loại MIME. Tài liệu tham khảo trực tuyến miễn phí với hơn 1000 mục.
- Kiểm tra độ phân giải màn hình Phát hiện độ phân giải màn hình, kích thước viewport, DPI và độ sâu màu theo thời gian thực.