# 199: Забъркване с JSX - CSS-трикове

Anonim

Вероятно трябваше да науча това отдавна, но уви, ето ни. Оказва се, че можете да кажете каква функция искате да използва JSX. Да, JSX наистина има само една основна трансформация, която прави. Той превръща ъгловите скоби в JavaScript в извикване на функция. Така че, ако напишете ред като този в JavaScript:

 Hello 

След обработка (вероятно с Babel и приставката JSX) ще получите по подразбиране:

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

Но ако включите коментар на директива, казващ на JSX, че искате да използвате собствената си функция, можете да промените този изход:

/* @jsx myFunction */ Hello 

Превръща се в:

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

Това означава, че можем да напишем собствената си функция. Някак странно, но добре.

Реалният случай на употреба е за библиотеки, които не са React, като Preact. Научих това от разглеждането на примерите на Джейсън Милър:

Vue може да се направи и по този начин. Имайте предвид, че както Vue, така и Preact доставят тази специална hфункция, предназначена за това:

Валери Карпов има няколко интересни случая на употреба в публикацията си в блога „Преглед на JSX с 3 примера, които не реагират“.