createFactory

Устаревший

const factory = createFactory(type)

• Справочник
  • createFactory(type)
• Использование
  • Создание React-элементов с помощью фабрики
• Альтернативы
  • Копирование createFactory в ваш проект
  • Замена createFactory на createElement
  • Замена createFactory на JSX

Справочник

createFactory(type)

Вызовите createFactory(type) для создания функции-фабрики, которая создаёт React-элементы заданного type.

import { createFactory } from 'react';

const button = createFactory('button');

Затем вы можете использовать её для создания React-элементов без JSX:

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

См. дополнительные примеры ниже.

Параметры

• type: Аргумент type должен быть допустимым типом компонента React. Например, это может быть строка имени тега (например, 'div' или 'span'), или компонент React (функция, класс или специальный компонент, например, Fragment).

Возвращаемое значение

Возвращает функцию-фабрику. Эта функция-фабрика принимает объект props в качестве первого аргумента, за которым следует список аргументов ...children, и возвращает React-элемент с заданными type, props и children.

Использование

Создание React-элементов с помощью фабрики

Хотя большинство проектов React используют JSX для описания пользовательского интерфейса, JSX не является обязательным. Раньше createFactory использовался как один из способов описания пользовательского интерфейса без JSX.

Вызовите createFactory для создания функции-фабрики для конкретного типа элемента, например, 'button':

import { createFactory } from 'react';

const button = createFactory('button');

Вызов этой функции-фабрики создаст 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');
}

Вот полный пример использования React без JSX:

import { createElement } from 'react';

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

Замена createFactory на JSX

Наконец, вы можете использовать JSX вместо createFactory. Это наиболее распространённый способ использования React:

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

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

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