Tôi thấy rằng React 16 cho phép các thuộc tính được chuyển qua DOM. Vì vậy, điều đó có nghĩa là 'class' có thể được sử dụng thay vì className, phải không?
Tôi chỉ tự hỏi liệu có lợi thế nào khi vẫn sử dụng className over class, ngoài việc tương thích ngược với các phiên bản trước của React.
Câu trả lời:
classlà một từ khóa trong javascript và JSX là một phần mở rộng của javascript. Đó là lý do chính tại sao React sử dụng classNamethay vì class.
Không có gì thay đổi trong vấn đề đó.
Để mở rộng điều này nhiều hơn một chút. Một từ khóa có nghĩa rằng một mã thông báo có một ý nghĩa đặc biệt trong một cú pháp ngôn ngữ. Ví dụ trong:
class MyClass extends React.Class {
Mã classthông báo biểu thị rằng mã thông báo tiếp theo là một định danh và những gì tiếp theo là một khai báo lớp. Xem Từ khóa Javascript + Từ dành riêng .
Thực tế là mã thông báo là một từ khóa có nghĩa là chúng ta không thể sử dụng nó trong một số biểu thức, ví dụ:
// invalid in older versions on Javascript, valid in modern javascript
const props = {
class: 'css class'
}
// valid in all versions of Javascript
const props = {
'class': 'css class'
};
// invalid!
var class = 'css';
// valid
var clazz = 'css';
// invalid!
props.class = 'css';
// valid
props['class'] = 'css';
Một trong những vấn đề là không ai có thể biết liệu một số vấn đề khác sẽ không phát sinh trong tương lai hay không. Mọi ngôn ngữ lập trình vẫn đang phát triển và classthực sự có thể được sử dụng trong một số cú pháp xung đột mới.
Không có vấn đề như vậy tồn tại với className.
props.class = 'css' điều này hoàn toàn hợp lệ
Nhóm React thực sự sẽ chuyển sang class thay vì className trong tương lai sắp tới ( nguồn ):
className→class( # 4331 , xem thêm # 13525 (bình luận) bên dưới). Điều này đã được đề xuất vô số lần. Chúng tôi đã cho phép truyền lớp xuống nút DOM trong React 16. Sự nhầm lẫn mà điều này đang tạo ra không đáng có bởi những giới hạn cú pháp mà nó đang cố gắng bảo vệ.
Tại sao chuyển đổi và không hỗ trợ cả hai?
Nếu chúng tôi hỗ trợ cả hai mà không có cảnh báo, thì cộng đồng sẽ chia ra để sử dụng cái nào. Mỗi thành phần trên npm chấp nhận một lớp hỗ trợ sẽ phải nhớ để chuyển tiếp cả hai. Nếu ngay cả một thành phần ở giữa không chơi cùng và chỉ triển khai một chỗ dựa, lớp đó sẽ bị mất - hoặc bạn có nguy cơ kết thúc
classvàclassNameở cuối "bất đồng" với nhau, không có cách nào để React giải quyết xung đột đó. Vì vậy, chúng tôi nghĩ rằng điều đó sẽ tồi tệ hơn hiện trạng, và muốn tránh điều này.
Vì vậy, bạn nên theo dõi.
Tôi vẫn sẽ sử dụng classNamemiễn là đây là những gì API mong đợi.
classkhông thể được sử dụng trong nhiều biểu thức vì nó là một từ khóa.
Chỉ để làm sáng tỏ hơn một chút, ngoài những câu trả lời hay ho khác đã được đưa ra:
Bạn sẽ nhận thấy rằng React sử dụng className thay vì lớp DOM truyền thống. Từ tài liệu, "Vì JSX là JavaScript nên không khuyến khích sử dụng các định danh như class và for dưới dạng tên thuộc tính XML. Thay vào đó, các thành phần React DOM yêu cầu các tên thuộc tính DOM tương ứng như className và htmlFor."
http://buildwithreact.com/tutorial/jsx
Ngoài ra, để trích dẫn zpao (một cộng tác viên React / nhân viên facebook)
Các thành phần DOM của chúng tôi sử dụng (hầu hết) API JS nên chúng tôi đã chọn sử dụng các thuộc tính JS (node.className, không phải node.class).
Tài liệu React khuyên bạn nên sử dụng cannonical React attributetên thay vì đặt tên Javascript thông thường, vì vậy ngay cả khi React cho phép các thuộc tính được chuyển qua DOM, nó sẽ đưa ra cảnh báo cho bạn.
Từ các tài liệu:
Known attributes with a different canonical React name:
<div tabindex="-1" />
<div class="hi" />
React 15: Warns and ignores them.
React 16: Warns but converts values to strings and passes them through.
Note: always use the canonical React naming for all supported attributes.
kể từ tháng 6 năm 2019, quá trình thay đổi className thành class đã bị tạm dừng, có thể tiếp tục sau
đây là bài viết của nhà phát triển facebook giải thích tại sao
Class so với className trong reactJS Class là một từ hoặc từ khóa dành riêng trong reactJS giống như hàm trong javascript. Đó là lý do tại sao chúng ta sử dụng từ "className" để chỉ lớp.
Không có lời giải thích thực sự nào của nhóm React về điều này nhưng người ta có thể cho rằng nó được phân biệt với từ khóa dành riêng "class" trong Javascript kể từ khi được giới thiệu trong ES2015 +.
Ngay cả khi bạn sử dụng "class" trong cấu hình phần tử khi tạo phần tử, nó sẽ không gây ra bất kỳ lỗi biên dịch / kết xuất nào.
Trong ReactJS, chúng ta đang xử lý JSX chứ không phải HTML như các bạn đã biết. JSX muốn bạn sử dụng className vì nó là một API DOM javascript cơ bản! class là một từ khóa dành riêng trong JS không phải là lý do chính khiến chúng ta không sử dụng class và thay vào đó, sử dụng className. Đó là vì chúng tôi đang đề cập đến API DOM đó