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 は除く。もし type がレガシー�? type.defaultProps を持つコンポーネントであれば、欠けているか undefined となっている props は type.defaultProps から値を取得します。
• 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,
}