API Reference

React DOM コンポーネント

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

一般的なコンポーネント

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

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

フォームコンポーネント

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

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

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

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

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

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

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

補足

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

カスタム HTML 要素

ダッシュを含むタグ、例えば <my-element> をレンダーする場合、React はカスタム HTML 要素をレンダーしていると想定します。

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

カスタム要素に値を渡す

カスタム要素にデータを渡す方法は 2 種類あります。

  1. 属性 (attribute) として：マークアップ内に現れ、文字列型の値しかとれない
  2. プロパティ (property) として：マークアップ内には直接現れず、任意の JavaScript 型をとれる

デフォルトでは、React は JSX に書かれた値を属性として渡します。

<my-element value="Hello, world!"></my-element>

カスタム要素に文字列ではない JavaScript の値が渡されると、デフォルトではシリアライズされます。

// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
<my-element value={[1,2,3]}></my-element>

ただし React は、対応するクラスのコンストラクタ内に当該プロパティ名が出現する場合、カスタム要素のプロパティに任意の値を渡すことができる、と認識します。

export class MyElement extends HTMLElement {
  constructor() {
    super();
    // The value here will be overwritten by React 
    // when initialized as an element
    this.value = undefined;
  }

  connectedCallback() {
    this.innerHTML = this.value.join(", ");
  }
}

カスタム要素でのイベントのリッスン

カスタム要素においては、イベントが起こったときに呼び出すための関数を受け取るのではなく、要素自体が CustomEvent をディスパッチするというのが一般的なパターンです。このようなイベントは、on 接頭辞をつけることで JSX 経由でリッスンすることができます。

export function App() {
  return (
    <my-element
      onspeak={e => console.log(e.detail.message)}
    ></my-element>
  )
}

補足

イベント名は大文字・小文字を区別し、ダッシュ (-) をサポートします。カスタム要素のイベントをリッスンする際は、大文字・小文字の区別やダッシュを保持するようにしてください。

// Listens for `say-hi` events
<my-element onsay-hi={console.log}></my-element>
// Listens for `sayHi` events
<my-element onsayHi={console.log}></my-element>

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

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

補足

DOM 標準と同様に、React では props の名前として 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 になります。
PrevioususeFormStatus
Next<div> などの一般的なコンポーネント