React áp dụng hệ thống DOM không phụ thuộc vào trình duyệt để tăng hiệu suất và độ tương thích với nhiều trình duyệt khác nhau. Nhân dịp này, chúng tôi đã loại bỏ một số khía cạnh chưa hoàn chỉnh trong cách triển khai DOM trên trình duyệt.
Trong React, tất cả các thuộc tính của DOM (bao gồm xử lí sự kiện) phải được viết theo camelCase. Ví dụ như attribute tabindex, thì trong React là tabIndex. Có những ngoại lệ là thuộc tính aria-* và data-* phải được viết chữ thường. Ví dụ aria-label vẫn là aria-label.
Sự khác biệt trong các thuộc tính
Có một vài thuộc tính hoạt động khác biệt giữa React và HTML:
checked
Thuộc tính checked được hỗ trợ bởi các component với kiểu checkbox hoặc radio. Bạn có thể dùng nó để thiết lập cho component có được checked hay chưa. Điều này hữu ích khi xây dựng những Component Kiểm Soát. defaultChecked là giá trị không kiểm soát, nó sẽ quyết định component có được chọn hay không khi nó được mount lần đầu tiên.
className
Để đặt class css, sử dụng thuộc tính className. Nó được sử dụng cho tất cả các phần tử DOM và SVG như div, a và những thuộc tính khác.
Nếu bạn sử dụng React với Web Components (trường hợp không phổ biến), thì vẫn dùng class.
dangerouslySetInnerHTML
dangerouslySetInnerHTML tương đương với innerHTML trong DOM. Nhìn chung, việc thay đổi DOM từ Javascript khá rủi ro do nó có thể vô tình để lộ người dùng cross-site scripting (XSS). Vì vậy, React có thể tạo HTML trực tiếp, nhưng bạn phải sử dụng dangerouslySetInnerHTML và truyền một object với key là _html để nhăc bạn nhớ rằng điều này không an toàn. Ví dụ:
Do for là một từ khoá trong Javascript, React dùng htmlFor.
onChange
Sự kiện onChange hoạt động đúng như tên gọi của nó: khi một giá trị của trường mẫu bị thay đổi, sự kiện này được phát ra. Chúng tôi cố tình không sử dụng hành vi của trình duyệt bởi vì onChange được hiểu sai bởi chính hành vi của nó và React dựa vào sự kiện này để xử lý đầu vào của người dùng trong thời gian thực.
