API Reference
React APIs

createFactory

Deprecated

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

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

const factory = createFactory(type)

Usage

Creación de elementos React con una Factory

Deprecated

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

Aunque la mayoría de los proyectos React utilizan JSX para describir la interfaz de usuario, no se requiere JSX. 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 de Factory para un tipo de elemento específico como 'button':

import { createFactory } from 'react';

const button = createFactory('button');

La llamada a esa función de Factory producirá elementos React con los props y los hijos que hayas proporcionado:

import { createFactory } from 'react';

const button = createFactory('button');

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

Así es como createFactory se utilizaba como alternativa a JSX. Sin embargo, createFactory está obsoleto, y no deberías llamar a createFactory en ningún código nuevo. Vea cómo migrar desde createFactory a continuación.

Alternativas

Copiando createFactory en tu proyecto

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

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

const button = createFactory('button');

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

Esto le permite mantener todo su código sin cambios, excepto las importaciones.

Sustitución de createFactory por createElement.

Si tienes unas cuantas llamadas a createFactory que no te interesa importa manualmente, y no quieres usar JSX, puedes reemplazar cada llamada a una función Factory con un createElement llamada. Por ejemplo, puede sustituir este código:

import { createFactory } from 'react';

const button = createFactory('button');

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

con éste código:

import { createElement } from 'react';

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

Aquí tienes un ejemplo completo de uso de React sin JSX:

import { createElement } from 'react';

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

Sustitución de createFactory por JSX

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

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

Atención

A veces, el 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, tienes que cambiar el nombre de tu variable para que empiece 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.

Referencia

createFactory(type)

Deprecated

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

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

import { createFactory } from 'react';

const button = createFactory('button');

Entonces puedes usarlo para crear elementos React sin JSX:

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

Parámetros

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

Returns

Devuelve una función Factory. Esa función recibe un objeto props como primer argumento, seguido de una lista de argumentos ...children, y devuelve un elemento React con el type, props y children dados.

PreviouscreateElementNextcreateRef

How do you like these docs?