createFactory

const factory = createFactory(type)

• リファレンス
  • createFactory(type)
• 使用法
  • ファクトリ関数を使って React 要素を作成する
• 代替手�?�
  • createFactory をプロジェクトにコピーする
  • createFactory を createElement に�?き換える
  • createFactory を JSX に�?き換える

リファレンス

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 を使わずにユーザインターフェースを記述するため�?方法�?ひとつでした。

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

import { createFactory } from 'react';

const button = createFactory('button');

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

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

代替手�?�

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

プロジェクト内で多く�? createFactory 呼び出しがある場合は、こ�? createFactory.js �?�?�装をプロジェクトにコピーします：

これにより、インポートを除くすべて�?コードを変更せずに保持できます。

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 を使用する�?�全な例です。

createFactory を JSX に�?き換える

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