# 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");

Αυτό σημαίνει ότι μπορούμε να γράψουμε τη δική μας λειτουργία. Κάπως περίεργο, αλλά εντάξει.

Η πραγματική περίπτωση χρήσης είναι για βιβλιοθήκες χωρίς αντιδράσεις, όπως το Preact. Το έμαθα από τα παραδείγματα του Jason Miller:

Το Vue μπορεί να γίνει και με αυτόν τον τρόπο. Σημειώστε ότι τόσο η Vue όσο και η Preact αποστέλλουν αυτήν την ειδική hλειτουργία που έχει σχεδιαστεί για αυτό:

Η Valeri Karpov έχει μερικές ενδιαφέρουσες περιπτώσεις χρήσης στην ανάρτηση του ιστολογίου τους, «Μια επισκόπηση του JSX με 3 παραδείγματα που δεν αντιδρούν».