createElement

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

• リファレンス
  • createElement(type, props, ...children)
• 使用方法
  • JSXを使わない要素の作成

リファレンス

createElement(type, props, ...children)

与えられたtype、props、およびchildrenでReact要素を作成するには、createElementを呼び出します。

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: 0個以上の子ノード。Reactノードであれば何でもかまいません。React要素、文字列、数値、ポータル、空のノード（null、undefined、true、false）、およびReactノードの配列を含みます。

返り値

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

• type: 渡されたtype。
• props: refとkeyを除いて、渡されたprops。
• ref: 渡されたref。省略された場合はnull。
• key: 渡されたkeyを文字列に変換したもの。省略された場合はnull。

通常、コンポーネントから要素を返し、または他の要素の子要素にします。要素のプロパティを読むことはできますが、作成後、すべての要素を不透明なものとして扱い、レンダリングのみに使用するのが最善です。

注意点

• React要素とそのpropsは不変として扱う必要があり、作成後に内容を変更してはなりません。開発中は、Reactは返された要素とそのpropsプロパティを浅く凍結して、これを強制します。

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

• 子要素をcreateElementに複数の引数として渡すのは、createElement('h1', {}, child1, child2, child3)のように、すべて静的に既知の場合のみにする必要があります。子要素が動的な場合は、配列全体を3番目の引数として渡します。createElement('ul', {}, listItems)。これにより、Reactは動的なリストのkeyの不足について警告します。静的なリストの場合は、順序が変更されることがないため、これは必要ありません。

使用方法

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

JSX が好きではない場合、またはプロジェクトで使用できない場合は、createElementを代替手段として使用できます。

JSXを使わずに要素を作成するには、いくつかのtype、props、およびchildren を使用してcreateElementを呼び出します。

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,
}