Bộ chuyển HTML sang JSX
Dán HTML và nhận về JSX React gọn gàng — class trở thành className, thuộc tính được viết camelCase, chuỗi style trở thành đối tượng và các thẻ tự đóng. Chạy hoàn toàn trong trình duyệt của bạn. Miễn phí.
Mọi thứ đều chạy trong trình duyệt của bạn — mã đánh dấu của bạn không bao giờ rời khỏi thiết bị.
1
Giới thiệu về Bộ chuyển HTML sang JSX
HTML to JSX Converter biến đánh dấu HTML thuần túy thành JSX sẵn sàng cho React theo thời gian thực. Nó đổi class thành className và for thành htmlFor, chuyển các thuộc tính kebab-case và SVG sang camelCase, chuyển chuỗi style inline thành đối tượng style JSX, và tự đóng các phần tử void như img và br — chính những chỉnh sửa bạn phải làm thủ công.
Dán một đoạn mã, một phần trang đầy đủ, hoặc đánh dấu xuất từ một công cụ thiết kế, và khung JSX cập nhật khi bạn gõ với đánh dấu cú pháp. Một tùy chọn bọc biến đầu ra thành một function component có tên, để kết quả có thể dùng ngay trong một dự án React mà không cần chỉnh sửa thêm.
Công cụ chuyển đổi này là một công cụ HTML sang JSX hoàn toàn client-side: đánh dấu của bạn được JavaScript biến đổi trong trình duyệt của bạn và không bao giờ rời khỏi thiết bị của bạn, khiến nó an toàn để dùng với các mẫu độc quyền và trang nội bộ.
Cách sử dụng Bộ chuyển HTML sang JSX
- Dán HTML của bạn vào khung bên trái, hoặc nhấp Sample để tải một ví dụ.
- Theo dõi khung JSX cập nhật tức thì khi bạn gõ hoặc chỉnh sửa.
- Bật Wrap in a component và đặt tên component nếu bạn muốn một function component sẵn dùng.
- Nhấp Copy để lấy JSX, hoặc Download để lưu thành Component.jsx.
- Dùng Clear để đặt lại cả hai khung và chuyển đổi một đoạn mã khác.