`jsxFactory` în TypeScript

tsconfig: limbaj și mediu TypeScript 2.1

Pentru jsx: "react", alege funcția apelată pentru fiecare element (implicit React.createElement) și pentru fragmente.

Sintaxă

"compilerOptions": {
  "jsx": "react",
  "jsxFactory": "h",
  "jsxFragmentFactory": "Fragment"
}

Ce face `jsxFactory`

Cu "jsx": "react", fiecare element JSX devine un apel de funcție. Implicit este React.createElement, iar fragmentele <>...</> folosesc React.Fragment. Biblioteci ca Preact folosesc alte nume: h și Fragment. jsxFactory și jsxFragmentFactory schimbă aceste nume.

reactNamespace este varianta mai veche: schimbă doar obiectul (Preact.createElement în loc de React.createElement). Nu poate fi folosită împreună cu jsxFactory. Pentru un singur fișier, aceleași lucruri se pot cere cu comentariile /** @jsx h */ și /** @jsxFrag Fragment */.

Valori implicite: React.createElement, React.Fragment și React. Opțiunile nu au efect cu react-jsx; acolo se folosește jsxImportSource.

Parametri

Parametru	Descriere
`jsxFactory`	Funcția pentru elemente. Implicit `React.createElement`.
`jsxFragmentFactory`	Valoarea pentru fragmente. Implicit `React.Fragment`.
`reactNamespace`	Obiectul pe care se apelează `createElement`. Implicit `React`.

Exemple

Exemplul 1: Preact cu h și Fragment

Funcțiile h și Fragment sunt importate din preact, iar JSX-ul le folosește direct.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "outDir": "dist"
  }
}

// src/salut.tsx
import { h, Fragment } from "preact";

export const Lista = () => (
  <>
    <p>Ana</p>
    <p>Ion</p>
  </>
);

Rezultat (tsc 5.9)

$ npx tsc && cat dist/salut.js
import { h, Fragment } from "preact";
export const Lista = () => (h(Fragment, null,
    h("p", null, "Ana"),
    h("p", null, "Ion")));

Exemplul 2: reactNamespace

Doar obiectul se schimbă; metoda rămâne createElement.

// tsconfig.json: "jsx": "react", "reactNamespace": "Preact"

// src/salut.tsx
export const A = () => <p>Bună</p>;