थाइमेलीफ वें का उपयोग कैसे करें: प्रतिक्रिया में पाठ जेएस

Question

मैं थाइमेलीफ और प्रतिक्रिया जेएस के साथ एक springboot अनुप्रयोग चला रहा हूँ। सभी एचटीएमएल पाठ संदेश.प्रोपर्टीज से पृष्ठों में टेक्स्ट का उपयोग करके पढ़े जाते हैं, लेकिन जब मेरे पास होता है: प्रतिक्रिया जेएस एचटीएमएल ब्लॉक में पाठ, प्रतिक्रिया जेएस इसके बारे में नाराज लगता है।

render() { 
    return (
     <input type="text" th:text="#{home.welcome}"> 
) 
} 

त्रुटि है:

Namespace tags are not supported. ReactJSX is not XML. 

वहाँ dangerouslySetInnerHTML का उपयोग कर के अलावा एक walkaround है?

धन्यवाद!

Answer 1

कोई सौहार्दपूर्ण कामकाज नहीं है।

आपको यह त्रुटि मिल रही है क्योंकि थाइमेलीफ एक्सएमएल आउटपुट करता है, और जेएसएक्स पार्स एक्सएमएल का विश्लेषण नहीं करते हैं।

आपने ऐसा इसलिए किया क्योंकि जेएसएक्स बहुत ही एक्सएमएल के समान दिखता है। लेकिन वे बहुत ही अलग हैं, और यहां तक ​​कि यदि आपने किसी भी तरह से नेममेलीफ को नामित गुणों को पट्टी करने के लिए हैक किया है और प्रस्तुत करने के लिए एक घटक प्राप्त करने में कामयाब रहे हैं, तो यह केवल डक्ट-टेप-एक साथ का एक क्षणिक क्षण होगा, जूरी-रिग कोड जो होगा आगे के उपयोग के तहत अलग हो जाओ।

यह वास्तव में एक बहुत बुरा विचार है क्योंकि जेएसएक्स जावास्क्रिप्ट है। आप फ्लाई पर जावास्क्रिप्ट उत्पन्न कर रहे हैं। बस कुछ कारणों से नाम देने के लिए यह लंबी अवधि में काम नहीं करेगा:

• यह परीक्षण करने के लिए असंभव नहीं होने पर आपके घटकों को मुश्किल बना देता है।
• आवेदन स्थिति के बारे में तर्क एक दुःस्वप्न होगा क्योंकि आप यह पता लगाने के लिए संघर्ष करेंगे कि एक निश्चित राज्य का स्रोत थाइमेलीफ या जेएस से आ रहा है या नहीं।
• यदि थाइमेलीफ खराब जेएस आउटपुट करता है तो आपका एप्लिकेशन पूरी तरह से रोक देगा।
• ये समस्याएं समय (Thyme?) के साथ बदतर हो जाएंगी क्योंकि डेवलपर्स आसानी से दुर्व्यवहार करते हैं जिसके साथ वे सर्वर-साइड डेटा को क्लाइंट-साइड में प्रस्तुत कर सकते हैं, जिससे एक पागल अनुप्रयोग आर्किटेक्चर होता है।

ऐसा मत करें। बस Thymeleaf का उपयोग करें, या सिर्फ प्रतिक्रिया का उपयोग करें।

नमूना वैकल्पिक: मैं मुख्य रूप से जावा बैकएंड द्वारा समर्थित एक प्रतिक्रिया अनुप्रयोग पर काम करता हूं। तो मैं समझता हूं कि इस हाइब्रिड पर कोई कैसे ठोकर खा सकता है और लगता है कि यह एक अच्छा विचार हो सकता है। आप पहले से ही थाइमेलीफ का उपयोग कर रहे हैं और यह पता लगाने की कोशिश कर रहे हैं कि आप अपने सर्वलेट को फिर से लिखने से कैसे बच सकते हैं लेकिन फिर भी प्रतिक्रिया की शक्ति प्राप्त करें।

हम दो साल पहले एक समान नाव में थे, उम्र बढ़ने वाले जेएसपी फ्रंटेंड के अलावा, लेकिन अंतर नगण्य है। हमने जो किया (और यह अच्छी तरह से काम करता है) पूरे प्रतिक्रिया अनुप्रयोग को बूटस्ट्रैप करने के लिए एक जेएसपी पृष्ठ का उपयोग करता है। अब एक जेएसपी पृष्ठ है जिसे हम उपयोगकर्ता को प्रस्तुत करते हैं। यह जेएसपी पृष्ठ जेएसओएन को एक <script> टैग में आउटपुट करता है जिसमें कुछ प्रारंभिक स्टार्टअप डेटा होता है जिसे हम तुरंत प्राप्त करना चाहते हैं। इसमें संसाधन, गुण, और केवल सादा डेटा शामिल है।

हम फिर एक और <script> आउटपुट करते हैं जो एक संकलित जेएस मॉड्यूल के स्थान पर इंगित करता है जिसमें संपूर्ण स्टैंडअलोन प्रतिक्रिया अनुप्रयोग होता है। यह एप्लिकेशन जेएसओएन डेटा को एक बार शुरू होने पर लोड करता है और फिर बाकी के लिए बैकएंड कॉल करता है।कुछ स्थानों पर, हमें इनके लिए जेएसपी का उपयोग करना होगा, जो आदर्श से कम है लेकिन आपके समाधान से अभी भी बेहतर है। हम क्या करते हैं जेएसपी पेज जेएसओएन युक्त एक एकल विशेषता आउटपुट करते हैं। इस तरह (और हमारी एक्सएचआर लाइब्रेरी द्वारा कुछ सावधानीपूर्वक छंटनी के साथ) हमें एक जेएसपी ढांचे के ऊपर एक गरीब व्यक्ति की डेटा इंटरचेंज परत मिलती है जिसमें हमारे पास बदलने का समय नहीं है।

यह निश्चित रूप से आदर्श नहीं है, लेकिन यह अच्छी तरह से काम करता है और हमें प्रतिक्रिया के कई फायदों से काफी फायदा हुआ है। जब हमें इस असाधारण कार्यान्वयन के साथ समस्याएं होती हैं, तो उन्हें अलग करना और हल करना आसान होता है।

Answer 2

यह थाइमेलीफ में रीएक्टजेएस ऐप्स को संभव है। सोचें कि क्या आप स्थिर स्थिर भाग चाहते हैं (जैसे कुछ लिंक, या यहां तक ​​कि केवल प्रदर्शित डेटा), आप Thymeleaf का उपयोग कर सकते हैं। यदि आपके पास एक जटिल हिस्सा है (कुछ ऐसा है जिसके लिए डोम पश्चाताप, साझा डेटा, यूआई/सॉकेट/जो कुछ भी अपडेट हैं), तो आप प्रतिक्रिया का उपयोग कर सकते हैं।

यदि आपको राज्य पारित करने की आवश्यकता है तो आप Redux/अन्य विधियों का उपयोग कर सकते हैं।

आप अपने बैकएंड को एक शेष एपीआई के माध्यम से प्रतिक्रिया हिस्से में डेटा भेज सकते हैं और केवल अपने सरल भागों को टुकड़े या थैमेलीफ का उपयोग करके सादे HTML के पूरे भाग के रूप में प्रस्तुत कर सकते हैं।

याद रखें, थाइमेलीफ वास्तव में केवल HTML है। प्रतिक्रिया वर्चुअल डोम है जो HTML के रूप में प्रस्तुत करता है। एक दूसरे को माइग्रेट करना वास्तव में काफी आसान है। तो आप कुछ भी "स्टेटिक" लिख सकते हैं या जो थाइमेलीफ/एचटीएमएल में यूआई को ज्यादा प्रतिक्रिया नहीं दे रहा है। आप भी उन हिस्सों को भी प्रतिक्रिया में प्रस्तुत कर सकते हैं, लेकिन बिना राज्य के।

थाइमेलीफ 3 आपको render variables from your Java to a separate JS file पर अनुमति देता है। तो वह भी JSX

में पारित करने के लिए

function showCode() { var code = /*[[${code}]]*/ '12345'; document.getElementById('code').innerHTML = code; }