createFactory

Цей API буде видалено в наступному старшому релізі React. Дивіться альтернативи.

createFactory дозволяє створити функцію, яка створює React-елементи заданого типу.

const factory = createFactory(type)

Довідник

`createFactory(type)`

Виклик createFactory(type) для створення фабричної функції, яка створює React-елементи заданого типу .

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');
}

import { createElement } from 'react';

export function createFactory(type) {
  return createElement.bind(null, type);
}

Це дозволить вам зберегти весь ваш код незмінним, окрім імпорту.

Заміна `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>
  );
};

Іноді ваш наявний код може передавати деяку змінну як тип замість константи типу 'button':

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-тег, оскільки він записаний у нижньому регістрі.

[email protected]