# 199: Bermesej dengan JSX - Trik CSS

Anonim

Saya mungkin sudah lama belajar ini, tapi sayangnya, ini dia. Ternyata anda dapat mengetahui fungsi apa yang anda mahu JSX gunakan. Ya, JSX hanya mempunyai satu transformasi utama yang dilakukannya. Ia mengubah kurungan sudut dalam JavaScript menjadi panggilan fungsi. Oleh itu, jika anda menulis baris seperti ini dalam JavaScript:

 Hello 

Selepas memproses (mungkin dengan Babel dan pemalam JSX), anda akan mendapat, secara lalai:

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

Tetapi jika anda memasukkan komen arahan yang memberitahu JSX bahawa anda ingin menggunakan fungsi anda sendiri, anda boleh mengubah output itu:

/* @jsx myFunction */ Hello 

Menjadi:

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

Itu bermaksud kita boleh menulis fungsi kita sendiri. Agak pelik, tapi OK.

Kes penggunaan sebenarnya adalah untuk perpustakaan bukan React, seperti Preact. Saya belajar ini dengan melihat contoh Jason Miller:

Vue boleh dilakukan dengan cara ini juga. Perhatikan bahawa kedua-dua Vue dan Preact menghantar hfungsi khas ini yang direka untuk ini:

Valeri Karpov mempunyai beberapa kes penggunaan yang menarik di catatan blog mereka, "Gambaran Keseluruhan JSX Dengan 3 Contoh Bukan Reaksi" juga.