Chuyển HTML sang JSX: công cụ đổi được gì, và những chỗ bạn vẫn phải sửa tay
Dán một đoạn HTML, công cụ đổi các thuộc tính có tên khác nhau giữa HTML và JSX, chuyển thuộc tính style thành đối tượng JavaScript và tự đóng các thẻ rỗng. Trang này liệt kê đúng danh sách phép đổi mà công cụ thực hiện, cùng những trường hợp nó xử lý chưa đúng để bạn biết cần soát lại chỗ nào.
Tính năng nổi bật
- Đổi class thành className và for thành htmlFor, hai thuộc tính hay gặp nhất
- Đổi các thuộc tính viết liền sang dạng chữ lạc đà: tabIndex, readOnly, colSpan, rowSpan, cellPadding, cellSpacing, maxLength, minLength, autoComplete và autoFocus
- Đổi tên các thuộc tính sự kiện: onClick, onChange, onSubmit, onKeyDown, onKeyUp, onMouseOver và onMouseOut
- Chuyển chuỗi style trong dấu nháy thành đối tượng JavaScript với tên thuộc tính viết chữ lạc đà
- Công tắc tự đóng thẻ rỗng, áp dụng cho img, input, br, hr, meta và link
- Ô nhập và ô kết quả đặt cạnh nhau, kèm sẵn một đoạn mẫu để bạn thử ngay
- Bảng đối chiếu ngay dưới cho thấy các cặp thuộc tính trước và sau khi đổi
- Chạy hoàn toàn trong trình duyệt, mã nguồn bạn dán vào không gửi lên máy chủ
Vì sao dán thẳng HTML vào React thì không chạy
JSX trông giống HTML nhưng nó không phải HTML; nó là cú pháp được biên dịch thành lời gọi hàm tạo phần tử, và những gì bạn viết trong thẻ sẽ trở thành thuộc tính của một đối tượng JavaScript. Vì thế hai từ class và for không dùng được, do cả hai đều là từ khóa của JavaScript. Vì thế mọi tên thuộc tính gồm nhiều từ đều chuyển sang chữ lạc đà cho khớp quy ước đặt tên trong ngôn ngữ. Và vì thế thuộc tính style không nhận chuỗi mà nhận một đối tượng. Khi bạn dán một đoạn giao diện lấy từ mẫu HTML hay từ một trang có sẵn, trình biên dịch sẽ báo lỗi ở dòng đầu tiên có class, còn những lỗi tinh vi hơn thì không báo mà chỉ khiến thuộc tính bị bỏ qua âm thầm. Công cụ này làm giúp bạn phần cơ học lặp đi lặp lại, còn phần cần suy nghĩ vẫn thuộc về bạn.
Lợi ích khi sử dụng
- Xử lý xong phần đổi tên thuộc tính lặp lại, thứ chiếm phần lớn thời gian khi chuyển giao diện
- Chuyển chuỗi style thành đối tượng, việc gõ tay rất dễ sai dấu phẩy và dấu nháy
- Bảng đối chiếu bên dưới giúp người mới nhớ được các cặp tên hay dùng
- Mã nguồn nội bộ không rời khỏi trình duyệt của bạn
- Biết trước công cụ chưa xử lý gì nên bạn soát đúng chỗ thay vì đọc lại toàn bộ
Cách chuyển một đoạn HTML sang JSX
- 1Dán đoạn HTML vào ô bên trái, nên dán từng khối vừa phải thay vì cả trang để dễ soát lại.
- 2Bật hoặc tắt công tắc tự đóng thẻ rỗng, nên tắt nếu mã của bạn đã viết sẵn dấu gạch chéo ở cuối các thẻ đó.
- 3Bấm nút chuyển đổi, kết quả hiện ở ô bên phải.
- 4Đọc lại kết quả và tìm bốn thứ: chuỗi trong thuộc tính sự kiện, chú thích kiểu HTML, các thẻ rỗng ngoài danh sách sáu thẻ, và những từ bị đổi nhầm trong phần chữ hiển thị.
- 5Dán vào dự án, để trình biên dịch và bộ kiểm tra kiểu chỉ ra nốt các lỗi còn lại rồi sửa tay.
Công cụ đổi bằng cách tìm và thay chuỗi, và điều đó sinh ra vài lỗi cụ thể
Phần chuyển đổi thực hiện bằng một loạt phép tìm và thay trên văn bản, không dựng cây tài liệu và không phân biệt đâu là tên thuộc tính đâu là nội dung chữ. Vì vậy có ba trường hợp cho kết quả sai mà bạn cần biết trước. Thứ nhất, cụm for bằng bị thay ở mọi nơi, nên một thuộc tính tùy chỉnh dạng data-for cũng bị đổi thành data-htmlFor, và một đoạn chữ hiển thị có chứa cụm đó cũng bị đổi theo. Thứ hai, từ readonly được thay ở mọi vị trí kể cả khi nó nằm trong nội dung chữ, ví dụ một dòng mô tả có chữ readonly sẽ bị viết hoa chữ o. Thứ ba, nếu mã của bạn đã tự đóng sẵn các thẻ rỗng và bạn vẫn bật công tắc tự đóng, công cụ sẽ thêm một dấu gạch chéo nữa và tạo ra thẻ hỏng có hai dấu gạch chéo. Cách phòng là dán từng khối nhỏ, tắt công tắc khi mã đã viết theo cú pháp tự đóng, và luôn đọc lại kết quả một lượt thay vì chép thẳng.
Những gì công cụ chưa đổi và bạn phải tự sửa
Danh sách này đáng in ra dán cạnh màn hình. Chú thích kiểu HTML nằm trong cặp dấu nhỏ hơn và chấm than không hợp lệ trong JSX, phải chuyển thành chú thích JavaScript đặt trong cặp ngoặc nhọn. Dấu ngoặc nhọn xuất hiện trong nội dung chữ sẽ bị hiểu là biểu thức, phải bọc lại dưới dạng chuỗi. Nhiều thuộc tính khác cũng đổi tên nhưng không nằm trong danh sách của công cụ, đáng chú ý là srcset thành srcSet, frameborder thành frameBorder, contenteditable thành contentEditable, spellcheck thành spellCheck, datetime thành dateTime, enctype thành encType, novalidate thành noValidate, crossorigin thành crossOrigin và autoplay thành autoPlay. Ngoài sáu thẻ rỗng mà công cụ xử lý, còn source, track, area, col, embed, param và wbr cũng bắt buộc tự đóng trong JSX. Cuối cùng, JSX chỉ trả về được một phần tử gốc, nên nếu đoạn bạn dán có nhiều thẻ ngang hàng ở tầng ngoài cùng, hãy bọc chúng trong một thẻ chứa hoặc trong cặp thẻ rỗng của React.
Thuộc tính sự kiện được đổi tên nhưng giá trị vẫn là chuỗi
Đây là chỗ dễ hiểu nhầm nhất. Khi bạn dán một đoạn có thuộc tính onclick gọi hàm, công cụ đổi tên thành onClick nhưng giữ nguyên giá trị trong dấu nháy kép. Kết quả là React nhận được một chuỗi trong khi nó chờ một hàm, và bạn sẽ thấy cảnh báo báo rằng trình xử lý sự kiện phải là một hàm nhưng lại nhận được một chuỗi, đồng thời nút bấm không làm gì cả. Cách sửa là viết lại thành biểu thức trong cặp ngoặc nhọn, trỏ tới một hàm đã khai báo trong thành phần thay vì gọi hàm toàn cục. Cần chú ý thêm một điểm: đặt cặp ngoặc tròn ngay sau tên hàm nghĩa là gọi hàm ngay lúc dựng giao diện chứ không phải khi người dùng bấm, đây là lỗi mà người mới rất hay mắc và biểu hiện của nó là hành động chạy ngay khi trang tải xong. Muốn truyền tham số, hãy bọc trong một hàm mũi tên. Tương tự, các thuộc tính sự kiện dạng nội tuyến của HTML không tương thích với thư viện, hãy chuyển hết logic vào trong thành phần.
Cách công cụ chuyển thuộc tính style và những chỗ nó vấp
Chuỗi style được cắt theo dấu chấm phẩy, mỗi phần lại cắt tiếp theo dấu hai chấm để lấy cặp tên thuộc tính và giá trị, tên thuộc tính đổi sang chữ lạc đà bằng cách bỏ dấu gạch nối và viết hoa chữ cái đứng sau, còn giá trị luôn được bọc trong dấu nháy kép. Cách này đúng cho phần lớn khai báo thông thường, và cũng đúng với tiền tố nhà cung cấp vì một khai báo bắt đầu bằng gạch nối sẽ cho tên viết hoa chữ đầu đúng như thư viện yêu cầu. Nhưng có hai chỗ nó vấp. Chỗ thứ nhất là giá trị có chứa dấu hai chấm hoặc dấu chấm phẩy bên trong, điển hình là hàm dẫn tới ảnh có địa chỉ đầy đủ; khi đó phép cắt sẽ chia sai và giá trị bị mất một phần, bạn phải viết lại tay. Chỗ thứ hai là biến CSS bắt đầu bằng hai dấu gạch nối; tên biến phải giữ nguyên chứ không được đổi sang chữ lạc đà, nên hãy kiểm tra lại nếu đoạn của bạn có dùng biến. Ngoài ra khi tự viết đối tượng style, số nguyên viết trần sẽ được thư viện tự thêm đơn vị pixel cho hầu hết thuộc tính.
Khi nào nên chuyển sang JSX và khi nào nên giữ nguyên HTML
Không phải đoạn HTML nào cũng đáng chuyển. Nếu đó là một khối nội dung tĩnh rất dài lấy từ hệ quản trị nội dung hoặc từ trình soạn thảo, chuyển sang JSX vừa mất công vừa khó bảo trì; giải pháp thường dùng là nạp nội dung đó bằng cơ chế chèn HTML thô của thư viện, đổi lại bạn phải làm sạch nội dung trước để tránh rủi ro chèn mã độc. Nếu đó là một khối giao diện có tương tác, có trạng thái hay lặp theo dữ liệu thì chuyển sang JSX là đúng, vì lúc đó bạn cần vòng lặp và điều kiện của JavaScript. Một lưu ý nữa khi chuyển: mỗi phần tử trong danh sách được tạo bằng vòng lặp cần một thuộc tính khóa duy nhất và ổn định, đừng dùng chỉ số của mảng nếu danh sách có thể sắp xếp lại. Với ô nhập liệu, thuộc tính value đi kèm hàm xử lý thay đổi sẽ tạo ra ô có kiểm soát; nếu bạn chỉ muốn đặt giá trị ban đầu, hãy dùng defaultValue thay vì value để tránh cảnh báo ô nhập bị khóa cứng.
Câu hỏi thường gặp (FAQ)
Vì sao trong JSX không dùng được class và for?
Vì cả hai đều là từ khóa của JavaScript, mà thuộc tính trong JSX cuối cùng trở thành khóa của một đối tượng JavaScript. Do đó thư viện chọn tên thay thế là className và htmlFor. Đây là hai phép đổi đầu tiên mà công cụ thực hiện và cũng là hai lỗi biên dịch đầu tiên bạn gặp khi dán thẳng HTML vào.
Vì sao thẻ br của tôi biến thành thẻ có hai dấu gạch chéo?
Vì mã của bạn đã tự đóng sẵn mà công tắc tự đóng thẻ rỗng vẫn bật, nên công cụ thêm một dấu gạch chéo nữa. Hãy tắt công tắc đó khi đoạn HTML của bạn đã viết theo cú pháp tự đóng, hoặc sửa tay lại các thẻ bị nhân đôi dấu gạch chéo trong kết quả.
Nút bấm sau khi chuyển không hoạt động, lỗi ở đâu?
Công cụ đổi tên onclick thành onClick nhưng giữ nguyên giá trị trong dấu nháy, nên React nhận một chuỗi trong khi nó chờ một hàm. Bạn phải viết lại thành biểu thức trong cặp ngoặc nhọn trỏ tới hàm đã khai báo trong thành phần, và nhớ không đặt cặp ngoặc tròn ngay sau tên hàm nếu không muốn hàm chạy ngay khi dựng giao diện.
Chú thích trong HTML có được chuyển không?
Không. Chú thích kiểu HTML nằm trong cặp dấu nhỏ hơn và chấm than sẽ gây lỗi biên dịch trong JSX. Bạn phải chuyển tay thành chú thích JavaScript đặt trong cặp ngoặc nhọn. Đây là một trong những lỗi đầu tiên trình biên dịch báo, nên khá dễ phát hiện.
Còn thuộc tính nào cần đổi tên mà công cụ chưa xử lý?
Khá nhiều, đáng chú ý là srcset thành srcSet, frameborder thành frameBorder, contenteditable thành contentEditable, spellcheck thành spellCheck, datetime thành dateTime, enctype thành encType, novalidate thành noValidate và crossorigin thành crossOrigin. Sau khi dán vào dự án, bộ kiểm tra kiểu và cảnh báo trong bảng điều khiển trình duyệt sẽ chỉ ra những chỗ còn sót.
Thẻ rỗng nào ngoài sáu thẻ công cụ xử lý cũng phải tự đóng?
Còn source, track, area, col, embed, param và wbr. Trong JSX, mọi thẻ rỗng đều bắt buộc kết thúc bằng dấu gạch chéo vì cú pháp này không có khái niệm thẻ tự đóng theo tên như HTML. Nếu quên, trình biên dịch sẽ báo thiếu thẻ đóng.
Vì sao thuộc tính style của tôi bị mất một phần giá trị?
Nhiều khả năng giá trị của bạn chứa dấu hai chấm hoặc dấu chấm phẩy bên trong, điển hình là hàm dẫn tới ảnh có địa chỉ đầy đủ. Phép cắt chuỗi theo dấu hai chấm sẽ chia sai ở những trường hợp đó. Hãy viết lại khai báo ấy bằng tay trong đối tượng style, hoặc chuyển nó ra tệp CSS riêng.
Biến CSS trong style có chuyển được không?
Không nên trông cậy vào công cụ ở trường hợp này. Tên biến bắt đầu bằng hai dấu gạch nối phải giữ nguyên chứ không được đổi sang chữ lạc đà, trong khi phép đổi tự động sẽ làm sai. Hãy kiểm tra và viết lại tay, giữ đúng tên biến trong dấu nháy khi khai báo trong đối tượng style.
Dán được cả một trang HTML vào không?
Được về mặt thao tác, nhưng không nên. Kết quả sẽ dài và bạn khó soát các chỗ bị đổi nhầm, chưa kể JSX chỉ trả về một phần tử gốc nên toàn bộ nội dung phải nằm trong một thẻ chứa. Hãy chuyển từng khối giao diện một, vừa dễ kiểm tra vừa hợp với cách chia thành phần trong React.
Vì sao chữ trong nội dung của tôi bị đổi sai?
Vì công cụ thay chuỗi trên toàn văn bản chứ không phân biệt tên thuộc tính với nội dung hiển thị. Những từ nằm trong danh sách thay thế như readonly hay autofocus sẽ bị đổi kể cả khi chúng nằm trong đoạn chữ. Hãy đọc lại phần nội dung tiếng Anh trong kết quả nếu đoạn của bạn có chứa các từ đó.
Có nên chuyển mọi khối HTML sang JSX không?
Không. Khối nội dung tĩnh rất dài lấy từ hệ quản trị nội dung thì thường nên nạp bằng cơ chế chèn HTML thô, kèm bước làm sạch nội dung để tránh rủi ro chèn mã độc. Chuyển sang JSX chỉ thật sự đáng khi khối đó có tương tác, có trạng thái hoặc lặp theo dữ liệu.
Mã nguồn tôi dán vào có bị gửi đi đâu không?
Không. Toàn bộ phép chuyển đổi chạy bằng JavaScript ngay trong trình duyệt, không có bước gọi máy chủ. Bạn có thể dán mã giao diện nội bộ chưa công bố mà không lo lộ, và cũng vì vậy công cụ dùng được ngay cả khi mất kết nối sau khi trang đã tải xong.
Từ khóa liên quan
- chuyển html sang jsx
- html to jsx converter
- jsx là gì
- class thành className trong react
- htmlFor trong react
- style inline trong react
- lỗi jsx không nhận class
- thẻ tự đóng trong jsx
- react fragment nhiều phần tử gốc
- onclick trong react
- dangerouslySetInnerHTML
- chú thích trong jsx
- chuyển template html sang react
- camelCase thuộc tính react
- defaultValue và value trong react
- srcSet trong react
- biến css trong style react
- chuyển giao diện html sang component
- html to react online
- công cụ chuyển đổi mã miễn phí
