# 199: JSX के साथ मेसिंग - सीएसएस-ट्रिक्स

Anonim

मुझे शायद यह बहुत पहले सीखना चाहिए था, लेकिन अफसोस, यहाँ हम हैं। आपको पता चलता है कि आप JSX को किस फ़ंक्शन का उपयोग करना चाहते हैं। हां, JSX वास्तव में केवल एक प्राथमिक परिवर्तन है जो यह करता है। यह जावास्क्रिप्ट कोष्ठक को फ़ंक्शन कॉल में बदल देता है। तो, अगर आप जावास्क्रिप्ट में इस तरह एक लाइन लिखते हैं:

 Hello 

प्रसंस्करण के बाद (शायद बैबेल और जेएसएक्स प्लगइन के साथ), आप डिफ़ॉल्ट रूप से प्राप्त करेंगे:

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

लेकिन यदि आप JSX को अपने स्वयं के फ़ंक्शन का उपयोग करना चाहते हैं, तो एक निर्देश टिप्पणी शामिल करें, आप उस आउटपुट को बदल सकते हैं:

/* @jsx myFunction */ Hello 

में बदल जाता हुँ:

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

इसका मतलब है कि हम अपना फंक्शन लिख सकते हैं। अजीब अजीब है, लेकिन ठीक है।

वास्तविक उपयोग का मामला गैर-रिएक्ट पुस्तकालयों के लिए है, जैसे कि प्रीटेक। मैंने जेसन मिलर के उदाहरणों को देखकर यह सीखा:

इस तरह से भी किया जा सकता है। ध्यान दें कि Vue और Preact दोनों इस विशेष hफ़ंक्शन को जहाज करते हैं जो इसके लिए डिज़ाइन किया गया है:

Valeri Karpov के अपने ब्लॉग पोस्ट में कुछ दिलचस्प उपयोग के मामले हैं, "3 गैर-रिएक्ट उदाहरणों के साथ JSX का एक अवलोकन"।