# 199: scherzare con JSX - Trucchi CSS

Anonim

Probabilmente avrei dovuto impararlo molto tempo fa, ma ahimè, eccoci qui. Si scopre che puoi dire quale funzione vuoi che JSX usi. Sì, JSX ha davvero solo una trasformazione primaria che fa. Trasforma le parentesi angolari in JavaScript in una chiamata di funzione. Quindi, se scrivi una riga come questa in JavaScript:

 Hello 

Dopo l'elaborazione (probabilmente con Babel e il plugin JSX), otterrai, per impostazione predefinita:

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

Ma se includi un commento di direttiva che dice a JSX che vuoi usare la tua funzione, puoi cambiare quell'output:

/* @jsx myFunction */ Hello 

Diventa:

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

Ciò significa che possiamo scrivere la nostra funzione. Un po 'strano, ma OK.

Il caso d'uso effettivo è per le librerie non React, come Preact. L'ho imparato guardando gli esempi di Jason Miller:

Anche Vue può essere fatto in questo modo. Nota che sia Vue che Preact forniscono questa hfunzione speciale progettata per questo:

Valeri Karpov ha anche alcuni casi d'uso interessanti nel loro post sul blog, "Una panoramica di JSX con 3 esempi di non reazione".