createElement

const element = createElement(type, props, ...children)

• リファレンス
  • createElement(type, props, ...children)
• 使用法
  • JSX を使わずに要素を作成する

リファレンス

createElement(type, props, ...children)

createElement を呼び出して、指定した type、props、children を持った React 要素を作成します。

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

さらに例を見る

引数

• type: type 引数は有効な React のコンポーネント型でなければなりません。例えば、タグ名の文字列（'div' や 'span'）や、React コンポーネント（関数、クラス、または Fragment のような特別なコンポーネント）が該当します。

• props: props 引数はオブジェクトか null でなければなりません。null を渡すと、空のオブジェクトと同じように扱われます。React は、渡された props と同じ props を持った要素を作成します。props オブジェクトの ref と key は特別であり、返された element の element.props.ref や element.props.key として利用できません。element.ref ないし element.key となります。

• 省略可能 ...children: ゼロ個以上の子ノード。これらは React ノード、つまり、React 要素、文字列、数値、ポータル、空ノード（null、undefined、true、false）、あるいは React ノードの配列となります。

返り値

createElement は以下のプロパティを持つ React 要素オブジェクトを返します。

• type: 指定した type。
• props: 指定した props、ただし ref と key は除く。
• ref: 指定した ref。未指定の場合は null。
• key: 指定した key。強制的に文字列に変換されます。未指定の場合は null。

通常、この要素をコンポーネントから返すか、他の要素の子として用います。要素のプロパティを読み取ることは可能ですが、作成後は要素の構造を非公開 (opaque) として扱い、レンダーのみ行うようにするべきです。

注意点

• React 要素とその props はイミュータブル (immutable) として扱い、作成後にその内容を変更してはなりません。これを強制するために、React は開発環境において、返された要素とその props プロパティを浅く凍結 (freeze) します。

• JSX を使用する場合、独自のカスタムコンポーネントをレンダーするためにはタグを大文字で始める必要があります。つまり、<Something /> は createElement(Something) と同等ですが、<something />（小文字）は createElement('something') と同等です（文字列なので、組み込みの HTML タグとして扱われます）。

• 複数の子の内容がすべて静的に分かっている場合、createElement には子を createElement('h1', {}, child1, child2, child3) のように複数の引数として渡してください。子が動的な場合は、配列全体を第 3 引数として createElement('ul', {}, listItems) のように渡してください。これにより、React は動的なリストに key が欠けている場合に警告を出すようになります。静的なリストでは並び替えは決して発生しないため、key は必要ありません。

使用法

JSX を使わずに要素を作成する

JSX が好きでない場合や、プロジェクトで使用できない場合には、代わりに createElement を使用できます。

JSX を使わずに要素を作成するには、createElement を呼び出して、何らかの type、props、children を引数として渡します。

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello ',
    createElement('i', null, name),
    '. Welcome!'
  );
}

children はオプションで、必要なだけ渡すことができます（上記の例では子が 3 つあります）。このコードは、<h1> ヘッダに挨拶文字列を入れて表示します。比較のため、以下に JSX を使って書き直した同じ例を示します。

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      Hello <i>{name}</i>. Welcome!
    </h1>
  );
}

自身のカスタム React コンポーネントをレンダーするには、'h1' のような文字列ではなく Greeting のような関数を type として渡します。

export default function App() {
  return createElement(Greeting, { name: 'Taylor' });
}

JSX を使用した場合は以下のようになります。

export default function App() {
  return <Greeting name="Taylor" />;
}

以下は、createElement を使用して書かれたフルのサンプルです。

同じものを JSX で書くと以下のようになります。

どちらのコーディングスタイルも問題ありませんので、プロジェクトに合わせて好きな方を使用してください。createElement と比較して JSX を使用する場合の主な利点は、どの閉じタグがどの開きタグに対応しているかが簡単にわかることです。

// Slightly simplified
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}