"jsx"
Określa, co kompilator robi ze składnią JSX w plikach .tsx.
Przykład
#{
"compilerOptions": {
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Bundler"
},
"include": ["src"]
}Definicja i zastosowanie
#Opcja jsx mówi kompilatorowi, jak przetwarzać znaczniki JSX w plikach .tsx. Bez niej każdy taki znacznik kończy się błędem „Cannot use JSX unless the '--jsx' flag is provided”.
Przy wartości react-jsx JSX zamienia się na wywołania funkcji z modułu react/jsx-runtime, którego import kompilator dodaje sam. To zalecane ustawienie od Reacta 17: w plikach z JSX nie trzeba importować React. preserve zostawia JSX bez zmian dla narzędzia, które przetworzy go później, a starsze react zamienia go na React.createElement().
Opcja jsxImportSource pozwala użyć tej samej składni z inną biblioteką, np. z Preactem. Do sprawdzania typów w JSX kompilator potrzebuje typów biblioteki, w przypadku Reacta paczki @types/react.
Składnia
#"jsx": "react-jsx"Dostępne wartości
#react-jsx
_jsx("span", …)
Wywołania zreact/jsx-runtime, import dodawany automatycznie. Zalecane dla Reacta 17 i nowszych.react-jsxdev
_jsxDEV("span", …)
Jakreact-jsx, ale z informacjami do debugowania: plikiem, wierszem i kolumną znacznika.preserve
<span>…</span>
JSX zostaje bez zmian, a plik wynikowy ma rozszerzenie.jsx. Dla projektów, w których JSX przetwarza bundler lub framework.react
React.createElement("span", …)
Starszy sposób.Reactmusi być dostępny w każdym pliku z JSX.react-native
<span>…</span>
JSX zostaje bez zmian, ale plik wynikowy ma rozszerzenie.js.
Więcej przykładów
#// src/Badge.tsx
export function Badge({ label }: { label: string }) {
return <span className="badge">{label}</span>
}
// Wynik kompilacji z "jsx": "react-jsx":
// import { jsx as _jsx } from "react/jsx-runtime";
// export function Badge({ label }) {
// return _jsx("span", { className: "badge", children: label });
// }{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact"
}
}Dobre praktyki
#- W projekcie z Next.js lub Vite zostaw wartość z szablonu. Narzędzie ustawia
jsxtak, jak potrzebuje tego jego kompilator. - Błąd „This JSX tag requires the module path 'react/jsx-runtime' to exist” oznacza brak typów Reacta. Zainstaluj paczkę
@types/react. - Pliki z JSX muszą mieć rozszerzenie
.tsx. W pliku.tsznacznik zostanie odczytany jako asercja typu albo porównanie i pojawią się mylące błędy składni.
Powiązane hasła
#- "lib"Wybiera wbudowane typy środowiska: wersję JavaScriptu, API przeglądarki i pojedyncze nowości języka.
- "module"Format modułów w wygenerowanym kodzie i sposób rozumienia importów.
- "target"Wersja JavaScriptu, do której kompilator zamienia kod.
- "include" i "exclude"Które pliki kompilator bierze pod uwagę, a które pomija.
Widzisz błąd albo brakuje przykładu? Napisz do nas.