createElement

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

• Reference
  • createElement(type, props, ...children)
• Usage
  • Creare un elemento senza JSX

Reference

createElement(type, props, ...children)

Chiama createElement per creare un elemento React con il type, le props e i children indicati.

import { createElement } from 'react';

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

Vedi altri esempi sotto.

Parameters

• type: L’argomento type deve essere un tipo componente React valido. Ad esempio, può essere una stringa con il nome di un tag (come 'div' o 'span'), oppure un componente React (una funzione, una classe o un componente speciale come Fragment).

• props: L’argomento props deve essere un oggetto oppure null. Se passi null, verrà trattato come un oggetto vuoto. React creerà un elemento con props che corrispondono alle props che hai passato. Nota che ref e key dall’oggetto props sono speciali e non saranno disponibili come element.props.ref e element.props.key sull’ element restituito. Saranno disponibili come element.ref e element.key.

• optional ...children: Zero o più nodi figli. Possono essere qualsiasi nodo React, inclusi elementi React, stringhe, numeri, portali, nodi vuoti (null, undefined, true e false) e array di nodi React.

Returns

createElement restituisce un oggetto elemento React con alcune proprietà:

• type: Il type che hai passato.
• props: Le props che hai passato, tranne ref e key.
• ref: La ref che hai passato. Se manca, null.
• key: La key che hai passato, convertita in stringa. Se manca, null.

Di solito, restituirai l’elemento dal tuo componente o lo renderai come figlio di un altro elemento. Anche se puoi leggere le proprietà dell’elemento, è meglio trattare ogni elemento come opaco dopo la creazione e limitarti a renderizzarlo.

Caveats

• Devi trattare gli elementi React e le loro props come immutabili e non modificarne mai il contenuto dopo la creazione. In sviluppo, React congelerà l’elemento restituito e la sua proprietà props in modo superficiale per imporre questa regola.

• Quando usi JSX, devi iniziare un tag con una lettera maiuscola per renderizzare il tuo componente personalizzato. In altre parole, <Something /> equivale a createElement(Something), ma <something /> (minuscolo) equivale a createElement('something') (nota che è una stringa, quindi verrà trattato come un tag HTML integrato).

• Dovresti passare i children come argomenti multipli a createElement solo se sono tutti staticamente noti, come createElement('h1', {}, child1, child2, child3). Se i tuoi children sono dinamici, passa l’intero array come terzo argomento: createElement('ul', {}, listItems). In questo modo React ti avviserà delle key mancanti per le liste dinamiche. Per le liste statiche non è necessario, perché non vengono mai riordinate.

Usage

Creare un elemento senza JSX

Se non ti piace il JSX o non puoi usarlo nel tuo progetto, puoi usare createElement come alternativa.

Per creare un elemento senza JSX, chiama createElement con un type, delle props e dei children:

import { createElement } from 'react';

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

I children sono opzionali e puoi passarne quanti ne servono (l’esempio sopra ne ha tre). Questo codice mostrerà un’intestazione <h1> con un saluto. A titolo di confronto, ecco lo stesso esempio riscritto con JSX:

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

Per renderizzare il tuo componente React, passa una funzione come Greeting come type invece di una stringa come 'h1':

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

Con JSX, apparirebbe così:

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

Ecco un esempio completo scritto con createElement:

Ed ecco lo stesso esempio scritto con JSX:

Entrambi gli stili di codice vanno bene, quindi puoi usare quello che preferisci per il tuo progetto. Il vantaggio principale di usare JSX rispetto a createElement è che è facile vedere quale tag di chiusura corrisponde a quale tag di apertura.

// Leggermente semplificato
{
  type: Greeting,
  props: {
    name: 'Taylor'
  },
  key: null,
  ref: null,
}