# 199: Messing with JSX - Triky CSS

Anonim

Pravděpodobně jsem se to měl naučit už dávno, ale bohužel, tady jsme. Ukázalo se, že můžete říct, jakou funkci má JSX používat. Ano, JSX má opravdu jen jednu primární transformaci, kterou dělá. Ukazuje úhlové závorky v JavaScriptu na volání funkce. Takže pokud napíšete takový řádek v JavaScriptu:

 Hello 

Po zpracování (pravděpodobně s Babel a pluginem JSX) ve výchozím nastavení získáte:

React.createElement("div", ( class: "big" ), "Hello");

Pokud ale zahrnete direktivní komentář, který říká JSX, že chcete použít svou vlastní funkci, můžete tento výstup změnit:

/* @jsx myFunction */ Hello 

Změní se na:

/* @jsx myFunction */ myFunction("div", ( class: "big" ), "Hello");

To znamená, že můžeme napsat vlastní funkci. Trochu divný, ale v pořádku.

Skutečný případ použití je pro nereagující knihovny, například Preact. Dozvěděl jsem se to při pohledu na příklady Jasona Millera:

Vue lze provést také tímto způsobem. Všimněte si, že Vue i Preact dodávají tuto speciální hfunkci, která je k tomu určena:

Valeri Karpov má také několik zajímavých případů použití na svém blogovém příspěvku „Přehled JSX se 3 příklady nereagování“.