非推奨

この API は、React の将来のメジャーバージョンで削除されます。代替手段を参照してください。

createFactoryを使用すると、指定された型の React 要素を生成する関数を作成できます。

const factory = createFactory(type)

リファレンス

createFactory(type)

createFactory(type)を呼び出して、指定されたtypeの React 要素を生成するファクトリ関数を作成します。

import { createFactory } from 'react';

const button = createFactory('button');

これにより、JSX なしで React 要素を作成するために使用できます。

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

詳細な例については、以下を参照してください。

パラメータ

  • type：type引数は、有効な React コンポーネント型である必要があります。たとえば、タグ名文字列（'div'や'span'など）や、React コンポーネント（関数、クラス、またはFragmentのような特別なコンポーネント）などがあります。

戻り値

ファクトリー関数を返します。そのファクトリー関数は、最初の引数としてpropsオブジェクトを受け取り、その後に...children引数のリストが続き、指定されたtype、props、およびchildrenを持つReact要素を返します。

使用方法

ファクトリーでReact要素を作成する

ほとんどのReactプロジェクトでは、ユーザーインターフェースを記述するためにJSXを使用していますが、JSXは必須ではありません。過去には、createFactoryは、JSXを使用せずにユーザーインターフェースを記述できる方法の1つでした。

createFactoryを呼び出して、'button'のような特定の要素タイプのファクトリー関数を作成します。

import { createFactory } from 'react';

const button = createFactory('button');

そのファクトリー関数を呼び出すと、提供したpropsとchildrenを持つReact要素が生成されます。

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

これが、createFactoryがJSXの代替として使用されていた方法です。ただし、createFactoryは非推奨であり、新しいコードでcreateFactoryを呼び出すべきではありません。createFactoryからの移行方法については、以下を参照してください。

代替案

プロジェクトにcreateFactoryをコピーする

プロジェクトにcreateFactoryの呼び出しが多数ある場合は、このcreateFactory.jsの実装をプロジェクトにコピーします。

import { createFactory } from './createFactory.js';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

これにより、インポートを除いて、すべてのコードを変更せずに維持できます。

createFactoryをcreateElementに置き換える

手動で移植しても構わないcreateFactoryの呼び出しがいくつかあり、JSXを使用したくない場合は、ファクトリー関数のすべての呼び出しをcreateElementの呼び出しに置き換えることができます。たとえば、次のコードを置き換えることができます。

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

次のコードに置き換えます。

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

JSXを使用しないReactの使用例を以下に示します。

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('Clicked!')
    }
  }, 'Click me');
}

createFactoryをJSXに置き換える

最後に、createFactoryの代わりにJSXを使用できます。これがReactを使用する最も一般的な方法です。

export default function App() {
  return (
    <button onClick={() => {
      alert('Clicked!');
    }}>
      Click me
    </button>
  );
};

落とし穴

既存のコードでは、'button'のような定数の代わりに、変数としてtypeを渡す場合があります。

function Heading({ isSubheading, ...props }) {
  const type = isSubheading ? 'h2' : 'h1';
  const factory = createFactory(type);
  return factory(props);
}

JSXで同じことをするには、変数の名前をTypeのように大文字で始めるように変更する必要があります。

function Heading({ isSubheading, ...props }) {
  const Type = isSubheading ? 'h2' : 'h1';
  return <Type {...props} />;
}

そうしないと、Reactは<type>を小文字であるため、組み込みのHTMLタグとして解釈します。

前createElement
次createRef