Prawdopodobnie powinienem był się tego nauczyć dawno temu, ale niestety, oto jesteśmy. Okazuje się, że możesz powiedzieć, jakiej funkcji chcesz używać w JSX. Tak, JSX tak naprawdę ma tylko jedną podstawową transformację, którą robi. Zamienia nawiasy kątowe w JavaScript w wywołanie funkcji. Tak więc, jeśli napiszesz taką linię w JavaScript:
Hello Po przetworzeniu (prawdopodobnie z Babel i wtyczką JSX), domyślnie otrzymasz:
React.createElement("div", ( class: "big" ), "Hello");Ale jeśli dołączysz komentarz dyrektywy, który mówi JSX, że chcesz użyć własnej funkcji, możesz zmienić to wyjście:
/* @jsx myFunction */ Hello Zmienia się w:
/* @jsx myFunction */ myFunction("div", ( class: "big" ), "Hello");Oznacza to, że możemy napisać własną funkcję. Trochę dziwne, ale OK.
Rzeczywisty przypadek użycia dotyczy bibliotek innych niż React, takich jak Preact. Nauczyłem się tego patrząc na przykłady Jasona Millera:
Vue też można zrobić w ten sposób. Zwróć uwagę, że zarówno Vue, jak i Preact oferują tę specjalną hfunkcję, która jest do tego przeznaczona:
Valeri Karpov również ma kilka interesujących przypadków użycia na swoim blogu „Przegląd JSX z trzema przykładami bez reakcji”.