React DOM コンポーネント

React は、ブラウザ組み込みのすべての HTMLSVG コンポーネントをサポートしています。


一般的なコンポーネント

すべてのブラウザ組み込みコンポーネントは、いくつかの props とイベントをサポートしています。

これには、refdangerouslySetInnerHTML のような React 固有の props も含みます。


フォームコンポーネント

以下のブラウザ組み込みコンポーネントはユーザからの入力を受け付けます。

これらは React では特別です。なぜなら props として value を渡すと制御されたコンポーネントになるからです。


リソース・メタデータ関連コンポーネント

以下のブラウザ組み込みコンポーネントを用いて、外部リソースを読み込んだり、ドキュメントにメタデータを付与したりすることができます。

これらが React にとって特別なのは、React がこれらをドキュメントの head 要素に入れることができ、リソースのロード中にサスペンドができ、また個々のコンポーネントのリファレンスページで説明されているような特別な挙動が有効になるからです。


すべての HTML コンポーネント

React はブラウザ組み込みのすべての HTML コンポーネントをサポートしています。これには以下が含まれます。

補足

DOM 標準と同様に、React では props の名前として camelCase 規則を使用します。例えば、tabindex ではなく tabIndex と書きます。既存の HTML を JSX に変換するためのオンラインコンバータを使用できます。


カスタム HTML 要素

ダッシュを含むタグ、例えば <my-element> をレンダーする場合、React はカスタム HTML 要素をレンダーしていると想定します。React では、カスタム要素のレンダーは、組み込みのブラウザタグのレンダーとは異なる方法で行われます。

  • すべてのカスタム要素の props は文字列にシリアライズされ、常に属性を使用して設定されます。
  • カスタム要素は className ではなく class を、htmlFor ではなく for を受け入れます。

組み込みのブラウザ HTML 要素を is 属性を用いてレンダーする場合も、カスタム要素として扱われます。

補足

React の将来のバージョンでは、カスタム要素に対するより包括的なサポートが含まれます

これは、最新の実験的 (experimental) バージョンに React パッケージをアップグレードすることで試すことができます。

  • react@experimental
  • react-dom@experimental

React の実験的バージョンにはバグが含まれている可能性があります。本番環境では使用しないでください。


すべての SVG コンポーネント

React は、組み込みのブラウザ SVG コンポーネントをすべてサポートしています。以下が含まれます。

補足

DOM 標準と同様に、React では props の名前として camelCase 規則を使用します。例えば、tabindex ではなく tabIndex と書きます。既存の SVG を JSX に変換するためのオンラインコンバータを使用できます。

名前空間付きの属性もコロンなしで書かなければなりません。

  • xlink:actuatexlinkActuate になります。
  • xlink:arcrolexlinkArcrole になります。
  • xlink:hrefxlinkHref になります。
  • xlink:rolexlinkRole になります。
  • xlink:showxlinkShow になります。
  • xlink:titlexlinkTitle になります。
  • xlink:typexlinkType になります。
  • xml:basexmlBase になります。
  • xml:langxmlLang になります。
  • xml:spacexmlSpace になります。
  • xmlns:xlinkxmlnsXlink になります。