createElement

const element = createElement(type, props, ...children)

• Referencia
  • createElement(type, props, ...children)
• Uso
  • Crear un elemento sin JSX

Referencia

createElement(type, props, ...children)

Llamar createElement para crear un elemento de React con type, props, y children.

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hola'
  );
}

Ver más ejemplos abajo.

Parámetros

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

• props: El argumento props debe ser un objeto o null. Si tu le pasas null, será tratado igual que un objecto vacío. React creará un elemento con props que coincidan con las props que has pasado. Ten en cuenta que ref y key de tu objecto props son especiales y lo harán no estar disponible como element.props.ref y element.props.key en el element devuelto. Estarán disponibles como element.ref y element.key.

• opcional ...children: Cero o más nodos. Pueden ser cualquier nodo de React, incluidos Elementos de React, strings, números, portales, nodos vacíos (null, undefined, true, y false), y arrays con nodos de React.

Devuelve

createElement devuelve un objecto React element con algunas propiedades:

• type: El type que pasaste.
• props: Los props que pasaste excepto ref y key. Si el type es un componente con type.defaultProps heredado, entonces cualquier props que falte o props indefinidas obtendrá los valores de type.defaultProps.
• ref: La ref que pasaste. Si no la pasaste es, null.
• key: La key que pasaste, forzada a ser string. Si no la pasaste es, null.

Por lo general, devolverá el elemento de tu componente o lo convertirá en hijo de otro elemento. Aunque puedes leer las propiedades del elemento, es mejor tratar cada elemento como opaco después de su creación, y solo renderizarlo.

Advertencias

• Debes tratar los elementos React y sus props como inmutables y nunca cambiar sus contenidos después de creados. En desarrollo, React congelaría superficialmente el elemento devuelto y sus props para hacer cumplir esto.

• Cuando usas JSX, debes comenzar una etiqueta con una letra mayúscula para renderizar tu propio componente personalizado. En otras palabras, <Something /> es equivalente a createElement(Something), pero <something /> (minúscula) es equivalente a createElement('something') (ten en cuenta que es un string, por lo que se tratará como una etiqueta de HTML normal).

• Solo deberías pasar children como múltiples argumentos para createElement si todos son estáticamente conocidos, como createElement('h1', {}, child1, child2, child3). Si tus children son dinámicos, pasa todo el arreglo como tercer argumento: createElement('ul', {}, listItems). Esto asegura que React advertirá sobre la falta de keys para cualquier lista dinámica. Para las listas estáticas, esto no es necesario porque nunca se reordenan.

Uso

Crear un elemento sin JSX

Si no te gusta JSX o no puedes usarlo en tu proyecto, puedes usar createElement como alternativa.

Para crear un elemento sin JSX, llamas a createElement con type, props y children:

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    '¡Hola ',
    createElement('i', null, name),
    '. Bienvenido!'
  );
}

Los children son opcionales, y puedes pasar tantos como necesites (el ejemplo anterior tiene tres hijos). Este código mostrará un encabezado <h1> con un saludo. A modo de comparación, aquí está el mismo ejemplo reescrito con JSX:

function Greeting({ name }) {
  return (
    <h1 className="greeting">
      ¡Hola <i>{name}</i>. Bienvenido!
    </h1>
  );
}

Para renderizar tu propio componente de React, pasas una función como Greeting como el type en lugar de un string como 'h1':

export default function App() {
  return createElement(Greeting, { name: 'Taylor' });
}

Con JSX, se vería así:

export default function App() {
  return <Greeting name="Taylor" />;
}

Aquí hay un ejemplo completo escrito con createElement:

Y aquí está el mismo ejemplo usando JSX:

Ambos estilos de código están bien, por lo que puedes usar el que prefieras para tu proyecto. El principal beneficio de usar JSX en comparación con createElement es que es fácil ver qué etiqueta de cierre corresponde a qué etiqueta de apertura.

// Slightly simplified
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}