React DOM 元件

React 支援所有瀏覽器內建的 HTMLSVG 元件。


常用元件

所有內建瀏覽器元件都支援一些屬性和事件。

這包括 React 特定的屬性,例如 refdangerouslySetInnerHTML


表單元件

這些內建瀏覽器元件接受使用者輸入

它們在 React 中很特殊,因為將 value 屬性傳遞給它們會使它們成為受控的。


資源和元資料元件

這些內建瀏覽器元件允許您載入外部資源或使用元資料註釋文件

它們在 React 中很特殊,因為 React 可以將它們渲染到文件頭部,在資源載入時掛起,並執行在每個特定元件的參考頁面上描述的其他行為。


所有HTML元件

React 支援所有內建瀏覽器 HTML 元件。這包括

注意

DOM 標準類似,React 使用 camelCase 約定來命名屬性。例如,您將編寫 tabIndex 而不是 tabindex。您可以使用 線上轉換器將現有的 HTML 轉換為 JSX。


自定義 HTML 元素

如果渲染帶有短橫線的標籤,例如 <my-element>,React 將假設您想要渲染一個自定義 HTML 元素。 在 React 中,渲染自定義元素與渲染內建瀏覽器標籤的方式不同。

  • 所有自定義元素屬性都序列化為字串,並且始終使用屬性設定。
  • 自定義元素接受 class 而不是 className,以及 for 而不是 htmlFor

如果使用is 屬性渲染內建瀏覽器 HTML 元素,它也將被視為自定義元素。

注意

未來版本的 React 將包含對自定義元素的更全面支援。

您可以嘗試將 React 包升級到最新的實驗版本。

  • react@experimental
  • react-dom@experimental

React 的實驗版本可能包含 bug。請勿在生產環境中使用它們。


所有 SVG 元件

React 支援所有內建瀏覽器 SVG 元件。這包括:

注意

DOM 標準類似,React 使用 camelCase 約定命名屬性。例如,您將編寫 tabIndex 而不是 tabindex。您可以使用線上轉換器將現有的 SVG 轉換為 JSX。

名稱空間屬性也必須不帶冒號書寫

  • xlink:actuate 變為 xlinkActuate
  • xlink:arcrole 變為 xlinkArcrole
  • xlink:href 變為 xlinkHref
  • xlink:role 變為 xlinkRole
  • xlink:show 變為 xlinkShow
  • xlink:title 變為 xlinkTitle
  • xlink:type 變為 xlinkType
  • xml:base 變為 xmlBase
  • xml:lang 變為 xmlLang
  • xml:space 變為 xmlSpace
  • xmlns:xlink 變為 xmlnsXlink