class vs className trong React 16

Question

Tôi thấy 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à 'lớp' có thể được sử dụng thay cho className, phải không?

Tôi chỉ tự hỏi có lợi thế nào khi vẫn sử dụng className trên lớp, ngoài việc tương thích ngược với các phiên bản trước của React.

Answer 1

class là 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 className thay vì class.

Không có gì thay đổi về mặt đó.

Answer 2

Tài liệu phản hồi đề xuất sử dụng tên cannonical React attribute 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ẽ cảnh báo cho bạn.

Từ docs:

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. 

Answer 3

Chỉ cần làm sáng tỏ hơn một chút, trên đầu trang của các câu trả lời tốt khác đã được đưa ra:

Bạn sẽ nhận thấy rằng Phản ứng dùng className thay vì lớp DOM truyền thống . Từ các tài liệu, "Vì JSX là JavaScript, nên số nhận dạng như lớp và không được khuyến khích là thuộc tính XML tên. Thay vào đó, các thành phần phản ứng DOM mong muốn tên thuộc tính DOM như className và htmlFor tương ứng".

http://buildwithreact.com/tutorial/jsx

Ngoài ra, để quote zpao (một Phản ứng đóng góp/nhân viên facebook)

thành phần DOM của chúng tôi sử dụng (chủ yếu) API JS vì vậy chúng tôi chọn sử dụng các thuộc tính JS (nút .className, không phải node.class).