Các thành phần React DOM
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ư ref
và dangerouslySetInnerHTML
.
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:
<aside>
<audio>
<b>
<base>
<bdi>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<slot>
<small>
<source>
<span>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<u>
<ul>
<var>
<video>
<wbr>
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ìclassName
vàfor
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.
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:
<a>
<animate>
<animateMotion>
<animateTransform>
<circle>
<clipPath>
<defs>
<desc>
<discard>
<ellipse>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feDropShadow>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<foreignObject>
<g>
<hatch>
<hatchpath>
<image>
<line>
<linearGradient>
<marker>
<mask>
<metadata>
<mpath>
<path>
<pattern>
<polygon>
<polyline>
<radialGradient>
<rect>
<script>
<set>
<stop>
<style>
<svg>
<switch>
<symbol>
<text>
<textPath>
<title>
<tspan>
<use>
<view>