Đầu vào
Đang chuẩn bị không gian làm việc…
Cách sử dụng
- Dán đoạn HTML, mở tệp UTF-8 hoặc nạp Mẫu.
- Chọn thụt lề rồi Chuyển sang JSX.
- Kiểm tra markup, sau đó sao chép hoặc tải xuống.
Đưa HTML vào React
HTML từ template thường cần sửa trước khi dùng trong JSX: className, htmlFor, phần tử tự đóng và cách viết inline style.
Công cụ xử lý cấu trúc markup. State, callback sự kiện và logic ứng dụng vẫn cần viết tại nơi dùng JSX.
Chuyển thuộc tính và style
Thuộc tính HTML được đổi sang dạng React, gồm className và htmlFor. Thuộc tính SVG phổ biến dùng cách viết hoa của React.
CSS inline thành đối tượng style và kết quả được định dạng JSX. Văn bản literal được escape khi cần, không coi là biểu thức JavaScript.
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>Ví dụ đổi thuộc tính được rút gọn. Đầu ra đầy đủ được định dạng và có lớp bọc fragment.
Cấu trúc và hành vi
Đoạn HTML được phân tích trước khi chuyển đổi. Đầu ra có lớp bọc fragment và cú pháp tự đóng khi phù hợp.
Phần tử script và thuộc tính sự kiện inline bị xóa. Hành vi không chuyển thành callback React; URL và style còn lại vẫn cần kiểm tra cho ứng dụng.
Tích hợp kết quả
Đặt JSX trong render hoặc biểu thức return của component. Nối lại hành vi thủ công và kiểm tra inline style, nhất là khai báo fallback lặp và !important mà đối tượng style không thể biểu diễn đầy đủ.
Đầu vào văn bản tối đa 1 MiB. Chuyển đổi CSS và HTML chạy trong Worker với giới hạn 30 giây. Công cụ màu dùng sRGB; kiểu dáng được tạo là bản xem trước và cần kiểm thử trong bố cục của bạn.
Câu hỏi thường gặp
Có tạo component React hoàn chỉnh không?
Không. Kết quả là markup JSX. Hãy thêm component, import, dữ liệu và hành vi trong dự án.
Script và onclick được xử lý thế nào?
Phần tử script và thuộc tính sự kiện inline bị xóa. Mã không được chạy hay đổi thành handler React.
Vì sao dấu ngoặc nhọn vẫn là văn bản?
Đầu vào được phân tích như HTML. Ngoặc nhọn literal được escape cho JSX, không được tính như biểu thức.
Inline style có được chuyển chính xác hoàn toàn không?
Khai báo phổ biến trở thành thuộc tính style React. Fallback lặp và !important không phải lúc nào cũng biểu diễn tương đương bằng đối tượng JavaScript.
Có chuyển SVG được không?
Thuộc tính SVG phổ biến được đổi sang tên React. Hãy kiểm tra ID, tham chiếu và thuộc tính riêng của ứng dụng trong component.