Các thành phần React DOM

React hỗ trợ tất cả các thành phần HTMLSVG được tích hợp sẵn của trình duyệt.


Các thành phần phổ biến

Tất cả các thành phần trình duyệt tích hợp sẵn đều hỗ trợ một số thuộc tính và sự kiện.

Điều này bao gồm các thuộc tính dành riêng cho React như refdangerouslySetInnerHTML.


Các thành phần biểu mẫu

Các thành phần trình duyệt tích hợp sẵn này chấp nhận đầu vào của người dùng:

Chúng đặc biệt trong React vì việc truyền thuộc tính value cho chúng sẽ khiến chúng trở thành được kiểm soát.


Các thành phần Tài nguyên và Siêu dữ liệu

Các thành phần trình duyệt tích hợp sẵn này cho phép bạn tải tài nguyên bên ngoài hoặc chú thích tài liệu bằng siêu dữ liệu:

Chúng đặc biệt trong React vì React có thể hiển thị chúng vào đầu tài liệu, tạm dừng trong khi tài nguyên đang tải và ban hành các hành vi khác được mô tả trên trang tham khảo cho từng thành phần cụ thể.


Tất cả các thành phần HTML

React hỗ trợ tất cả các thành phần HTML trình duyệt tích hợp sẵn. Điều này bao gồm:

Note

Tương tự như tiêu chuẩn DOM, React sử dụng quy ước camelCase cho tên thuộc tính. Ví dụ: bạn sẽ viết tabIndex thay vì tabindex. Bạn có thể chuyển đổi HTML hiện có sang JSX bằng một công cụ chuyển đổi trực tuyến.


Các phần tử HTML tùy chỉnh

Nếu bạn hiển thị một thẻ có dấu gạch ngang, chẳng hạn như <my-element>, React sẽ cho rằng bạn muốn hiển thị một phần tử HTML tùy chỉnh. Trong React, việc hiển thị các phần tử tùy chỉnh hoạt động khác với việc hiển thị các thẻ trình duyệt tích hợp sẵn:

  • Tất cả các thuộc tính của phần tử tùy chỉnh được tuần tự hóa thành chuỗi và luôn được đặt bằng các thuộc tính.
  • Các phần tử tùy chỉnh chấp nhận class thay vì classNamefor thay vì htmlFor.

Nếu bạn hiển thị một phần tử HTML trình duyệt tích hợp sẵn với thuộc tính is, nó cũng sẽ được coi là một phần tử tùy chỉnh.

Note

Một phiên bản React trong tương lai sẽ bao gồm hỗ trợ toàn diện hơn cho các phần tử tùy chỉnh.

Bạn có thể thử bằng cách nâng cấp các gói React lên phiên bản thử nghiệm mới nhất:

  • react@experimental
  • react-dom@experimental

Các phiên bản thử nghiệm của React có thể chứa lỗi. Không sử dụng chúng trong sản xuất.


Tất cả các thành phần SVG

React hỗ trợ tất cả các thành phần SVG trình duyệt tích hợp sẵn. Điều này bao gồm:

Note

Tương tự như tiêu chuẩn DOM, React sử dụng quy ước camelCase cho tên thuộc tính. Ví dụ: bạn sẽ viết tabIndex thay vì tabindex. Bạn có thể chuyển đổi SVG hiện có sang JSX bằng một công cụ chuyển đổi trực tuyến.

Các thuộc tính có không gian tên cũng phải được viết không có dấu hai chấm:

  • xlink:actuate trở thành xlinkActuate.
  • xlink:arcrole trở thành xlinkArcrole.
  • xlink:href trở thành xlinkHref.
  • xlink:role trở thành xlinkRole.
  • xlink:show trở thành xlinkShow.
  • xlink:title trở thành xlinkTitle.
  • xlink:type trở thành xlinkType.
  • xml:base trở thành xmlBase.
  • xml:lang trở thành xmlLang.
  • xml:space trở thành xmlSpace.
  • xmlns:xlink trở thành xmlnsXlink.