React DOM コンポーネント

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

一般的なコンポーネント

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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