Obsoleta

Esta API será eliminada en una futura versión mayor de React. Ver las alternativas.

createFactory te permite crear una función que produce elementos React de un tipo dado.

const factory = createFactory(type)

Referencia

createFactory(type)

Llama a createFactory(type) para crear una función fábrica que produzca elementos React de un type dado.

import { createFactory } from 'react';

const button = createFactory('button');

Luego puedes usarla para crear elementos React sin JSX:

export default function App() {
  return button({
    onClick: () => {
      alert('¡Hiciste clic!')
    }
  }, 'Hazme clic');
}

Ver más ejemplos abajo.

Parámetros

  • type: El argumento type debe ser un tipo de componente React válido. Por ejemplo, puede ser un string de nombre de etiqueta (como 'div' o 'span'), o un componente React (una función, una clase, o un componente especial como Fragment).

Devuelve

Devuelve una función fábrica. Esa función fábrica recibe un objeto props como primer argumento, seguido de una lista de argumentos ...hijos, y devuelve un elemento React con el type, props e hijos dados.

Uso

Creación de elementos React con una fábrica

Aunque la mayoría de los proyectos React usan JSX para describir la interfaz de usuario, JSX no es necesario. En el pasado, createFactory solía ser una de las formas de describir la interfaz de usuario sin JSX.

Llama a createFactory para crear una función fábrica para un tipo de elemento específico como 'button':

import { createFactory } from 'react';

const button = createFactory('button');

Llamar a esa función fábrica producirá elementos React con las props e hijos que hayas proporcionado:

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('¡Hiciste clic!')
    }
  }, 'Hazme clic');
}

Así es como se usaba createFactory como alternativa a JSX. Sin embargo, createFactory está obsoleta, y no deberías llamar a createFactory en ningún código nuevo. Ve cómo migrar de createFactory más abajo.

Alternativas

Copiando createFactory en tu proyecto

Si tu proyecto tiene muchas llamadas a createFactory, copia esta implementación createFactory.js en tu proyecto:

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

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('¡Hiciste clic!')
    }
  }, 'Hazme clic');
}

Esto te permite mantener todo tu código sin cambios excepto las importaciones.

Reemplazar createFactory con createElement

Si tienes algunas llamadas a createFactory que no te importa portar manualmente, y no quieres usar JSX, puedes reemplazar cada llamada a una función fábrica con una llamada a createElement. Por ejemplo, puedes reemplazar este código:

import { createFactory } from 'react';

const button = createFactory('button');

export default function App() {
  return button({
    onClick: () => {
      alert('¡Hiciste clic!')
    }
  }, 'Hazme clic');
}

con este código:

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('¡Hiciste clic!')
    }
  }, 'Hazme clic');
}

Este es un ejemplo completo de uso de React sin JSX:

import { createElement } from 'react';

export default function App() {
  return createElement('button', {
    onClick: () => {
      alert('¡Hiciste clic!')
    }
  }, 'Hazme clic');
}

Reemplazar createFactory con JSX

Finalmente, puedes usar JSX en lugar de createFactory. Esta es la forma más común de usar React:

export default function App() {
  return (
    <button onClick={() => {
      alert('¡Hiciste clic!');
    }}>
      Hazme clic
    </button>
  );
};

Atención

A veces, tu código existente puede pasar alguna variable como type en lugar de una constante como 'button':

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

Para hacer lo mismo en JSX, necesitas renombrar tu variable para que comience con una letra mayúscula como Type:

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

De lo contrario React interpretará <type> como una etiqueta HTML incorporada porque está en minúsculas.

AnteriorcreateElement
SiguientecreateRef

¿Qué te parece esta documentación?