# 199: Messing med JSX - CSS-tricks

Anonim

Jeg skulle nok have lært det for længe siden, men ak, her er vi. Det viser sig, at du kan fortælle, hvilken funktion du vil have JSX til at bruge. Ja, JSX har virkelig kun en primær transformation, som den gør. Det gør vinkelbeslag i JavaScript til et funktionsopkald. Så hvis du skriver en linje som denne i JavaScript:

 Hello 

Efter behandling (sandsynligvis med Babel og JSX-pluginet) får du som standard:

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

Men hvis du inkluderer en direktivkommentar, der fortæller JSX, at du vil bruge din egen funktion, kan du ændre denne output:

/* @jsx myFunction */ Hello 

Bliver til:

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

Det betyder, at vi kan skrive vores egen funktion. Lidt underligt, men OK.

Den egentlige brugssag er for ikke-reaktive biblioteker, som Preact. Jeg lærte dette ved at se på Jason Millers eksempler:

Vue kan også gøres på denne måde. Bemærk, at både Vue og Preact sender denne specielle hfunktion, der er designet til dette:

Valeri Karpov har også nogle interessante brugssituationer i deres blogindlæg, "En oversigt over JSX med 3 ikke-reagerende eksempler".