UTILS.
100% trong trình duyệt

HTML sang JSX / React

Chuyển một đoạn HTML thành JSX hợp lệ cho React — đổi tên thuộc tính, tự đóng các thẻ void, và biến inline style thành đối tượng style.

— kết quả hiển thị ở đây —

Về công cụ này

Bộ chuyển đổi HTML sang JSX / React phân tích một đoạn HTML bằng DOMParser gốc của trình duyệt và tuần tự hóa lại nó thành JSX hợp lệ, sửa mọi thứ React cần. Nó chạy hoàn toàn phía client, nên markup bạn dán vào ở lại trên máy của bạn. Dán bất kỳ HTML nào — một bản export thiết kế, một mẫu email, một bản phác lược thành phần — và nhận JSX bạn có thể thả thẳng vào một tệp React.

Quá trình viết lại đổi tên các thuộc tính dành riêng (class trở thành className, for trở thành htmlFor), đưa phần còn lại về camelCase — tabindex sang tabIndex, maxlength sang maxLength, stroke-width sang strokeWidth — trong khi để nguyên các thuộc tính data-* và aria-*. Các phần tử void như img, br, input, và hr được làm tự đóng (<img />), các chú thích HTML trở thành {/* ... */}, các dấu ngoặc nhọn literal trong văn bản được escape thành {'{'}, và một chuỗi inline style="a:b;c:d" được chuyển thành một đối tượng style={{ a: 'b', c: 'd' }} với các khóa CSS được camelCase. Các thuộc tính boolean như disabled có thể được phát ra trần hoặc dưới dạng ={true} với một công tắc.

Chọn output fragment — nhiều nút gốc được tự động bọc trong một fragment <>...</> — hoặc output thành phần đầy đủ, bọc JSX trong một export default function với tên và thụt lề bạn chọn (2 khoảng trắng, 4 khoảng trắng, hoặc tab). Kết quả sẵn sàng để dán; vì việc phân tích dùng một DOM thực, cấu trúc lồng sai được chuẩn hóa theo cùng cách trình duyệt sẽ làm.

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

Những thuộc tính nào được đổi tên?
class trở thành className và for trở thành htmlFor; các thuộc tính có gạch nối hoặc dành riêng khác được camelCase (tabindex sang tabIndex, maxlength sang maxLength, stroke-width sang strokeWidth). Các thuộc tính data-* và aria-* được giữ nguyên đúng như đã viết.
Các inline style được xử lý như thế nào?
Một chuỗi style="color:red;font-size:14px" trở thành style={{ color: 'red', fontSize: '14px' }} — mỗi thuộc tính CSS được camelCase và mọi giá trị được phát ra dưới dạng chuỗi, điều luôn hợp lệ cho inline style của React.
Điều gì xảy ra với nhiều phần tử gốc?
JSX cần một gốc duy nhất, nên khi đoạn mã của bạn có nhiều nút cấp cao nhất, chúng được bọc trong một Fragment (<>...</>). Chế độ thành phần đầy đủ thay vào đó bọc chúng trong một biểu thức có ngoặc được trả về.
Nó có chuyển đổi các chú thích và thẻ void không?
Có. Các chú thích HTML trở thành chú thích JSX {/* ... */}, và các phần tử void (img, br, input, hr, meta, link, và số còn lại) được render tự đóng dưới dạng <img />, điều JSX yêu cầu.

Công cụ khác