React DOM 組件

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


常見組件

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

這包括特定於 React 的道具,例如 refdangerouslySetInnerHTML


表單元件

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

它們在 React 中很特別,因為傳遞 value 道具給它們會讓它們受控。


資源和元資料元件

這些內建的瀏覽器元件讓您可以載入外部資源或使用元資料註解文件

它們在 React 中很特別,因為 React 可以將它們呈現在文件標頭中,在資源載入時暫停,並制定其他行為,這些行為會在每個特定元件的參考頁面上說明。


所有 HTML 元件

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

注意

DOM 標準 類似,React 使用 camelCase 慣例作為 prop 名稱。例如,您會寫 tabIndex 而不是 tabindex。您可以使用 線上轉換器 將現有的 HTML 轉換為 JSX。


自訂 HTML 元素

如果你呈現一個帶有破折號的標籤,例如 <my-element>,React 會假設你想要呈現一個 自訂 HTML 元素。 在 React 中,呈現自訂元素與呈現內建瀏覽器標籤的方式不同

  • 所有自訂元素屬性都會序列化為字串,並總是透過屬性設定。
  • 自訂元素接受 class 而不是 className,以及 for 而不是 htmlFor

如果你使用 is 屬性來渲染內建瀏覽器 HTML 元素,它也會被視為自訂元素。

注意

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

你可以透過將 React 套件升級到最新的實驗版本來嘗試

  • react@experimental
  • react-dom@experimental

React 的實驗版本可能包含錯誤。請勿在製作環境中使用它們。


所有 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