React DOM コンポーネント

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


一般的なコンポーネント

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

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


フォームコンポーネント

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

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


すべての 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 になります。