Skip to content

index.md

Latest commit

 

History

History
407 lines (334 loc) · 21.9 KB

index.md

File metadata and controls

407 lines (334 loc) · 21.9 KB
title React DOM コンポーネント

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

一般的なコンポーネント {/common-components/}

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

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

フォームコンポーネント {/form-components/}

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

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

リソース・メタデータ関連コンポーネント {/resource-and-metadata-components/}

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

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

すべての HTML コンポーネント {/all-html-components/}

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

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

カスタム HTML 要素 {/custom-html-elements/}

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

  • すべてのカスタム要素の props は文字列にシリアライズされ、常に属性を使用して設定されます。
  • カスタム要素は className ではなく class を、htmlFor ではなく for を受け入れます。 ======= If you render a tag with a dash, like <my-element>, React will assume you want to render a custom HTML element.

27d86ffe6ec82e3642c6490d2187bae2271020a4

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

Setting values on custom elements {/attributes-vs-properties/}

Custom elements have two methods of passing data into them:

  1. Attributes: Which are displayed in markup and can only be set to string values
  2. Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values

By default, React will pass values bound in JSX as attributes:

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

Non-string JavaScript values passed to custom elements will be serialized by default:

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

React will, however, recognize an custom element's property as one that it may pass arbitrary values to if the property name shows up on the class during construction:

import {MyElement} from './MyElement.js';
import { createRoot } from 'react-dom/client';
import {App} from "./App.js";

customElements.define('my-element', MyElement);

const root = createRoot(document.getElementById('root'))
root.render(<App />);
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(", ");
  }
}
export function App() {
  return <my-element value={[1,2,3]}></my-element>
}

Listening for events on custom elements {/custom-element-events/}

A common pattern when using custom elements is that they may dispatch CustomEvents rather than accept a function to call when an event occur. You can listen for these events using an on prefix when binding to the event via JSX.

import {MyElement} from './MyElement.js';
import { createRoot } from 'react-dom/client';
import {App} from "./App.js";

customElements.define('my-element', MyElement);

const root = createRoot(document.getElementById('root'))
root.render(<App />);
export class MyElement extends HTMLElement {
  constructor() {
    super();
    this.test = undefined;
    this.emitEvent = this._emitEvent.bind(this);
  }

  _emitEvent() {
    const event = new CustomEvent('speak', {
      detail: {
        message: 'Hello, world!',
      },
    });
    this.dispatchEvent(event);
  }

  connectedCallback() {
    this.el = document.createElement('button');
    this.el.innerText = 'Say hi';
    this.el.addEventListener('click', this.emitEvent);
    this.appendChild(this.el);
  }

  disconnectedCallback() {
    this.el.removeEventListener('click', this.emitEvent);
  }
}
export function App() {
  return (
    <my-element
      onspeak={e => console.log(e.detail.message)}
    ></my-element>
  )
}

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

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

  • react@experimental
  • react-dom@experimental

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

Events are case-sensitive and support dashes (-). Preserve the casing of the event and include all dashes when listening for custom element's events:

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

27d86ffe6ec82e3642c6490d2187bae2271020a4

---

すべての SVG コンポーネント {/all-svg-components/}

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