प्रतिक्रिया घटक में jQuery

Question

मेरे पास प्रतिक्रिया के साथ बनाया गया एक वेब-ऐप है। इस ऐप में मेरे पास पुराने संस्करण से jQuery कोड वाले कुछ पेज भी हैं। अभी यह सर्वर पक्ष प्रदान किया गया है और मुझे अपने स्वयं के नेविगेशन मेनू के साथ स्क्रिप्ट-टैग में jQuery और jQuery-UI कोड के साथ संपूर्ण ejs फ़ाइल लोड करना होगा। (JQuery कोड की लगभग 1000 पंक्तियां)

इसका मतलब है कि मुझे इन jQuery पृष्ठों के लिए एक और एनवी-मेन्यू बनाना है।

मैं अपने "सामग्री div" में इस jQuery निर्भर कोड को प्रस्तुत करना चाहता हूं, इसलिए मैं अभी भी प्रतिक्रिया राउटर का उपयोग कर प्रतिक्रिया मेनू का उपयोग कर सकता हूं। मैं इसे एक घटक की तरह प्रस्तुत करना चाहता हूं। लेकिन मुझे नहीं पता कि यह सबसे अच्छा समाधान है या नहीं।

मैं यह कैसे किया जा सकता है के कई उदाहरण पढ़ा है, लेकिन मैं नहीं जानता कि जो उनमें से लिए जाने के लिए और मैं उन्हें काम

की तरह इस उदाहरण में दिखाया गया बनाने के लिए strugling किया गया है: Adding script tag to React/JSX यह उदाहरण कहते हैं componentWillMount

में या आयात के साथ और स्क्रिप्ट टैग इस उदाहरण की तरह की आवश्यकता होती है: How to add script tag in React/JSX file?

मैं इन समाधानों NPM के माध्यम से jQuery की स्थापना के बिना काम नहीं कर सके।

मैंने अभी तक एनपीएम के माध्यम से jQuery स्थापित नहीं किया है क्योंकि मुझे पता है कि यह मेरे आवेदन के बाकी हिस्सों के लिए मेरे बंडल आकार को प्रभावित करेगा और मैं केवल अपने कुछ पृष्ठों के लिए jQuery का उपयोग कर रहा हूं। उपयोगकर्ता को शेष ऐप के लिए jQuery को लोड करने की ज़रूरत नहीं है

इस तरह की स्थिति में आप क्या सलाह देते हैं? प्रदर्शन और उपयोगकर्ता अनुभव के लिए सबसे अच्छा समाधान क्या है?

Answer 1

react-async-component पर एक नज़र डालें। अलग फ़ाइल में

// SomethingWithJquery.js 
import React, {Component} from 'react' 
import $ from 'jquery' 

class SomethingWithJquery extends Component { 

    constructor(props) { 
    super(props) 
    } 

    render() { 
    // ... as much jquery mess as you need 
    } 

} 

export default SomethingWithJquery 

और आवरण:: अपने घटक की तरह कुछ लग सकता है

// SomethingWithJquery.async.js 
import { asyncComponent } from 'react-async-component'; 

export default asyncComponent({ 
    resolve:() => System.import('./SomethingWithJquery') 
}); 

से आप इसका इस्तेमाल कर सकते हैं नियमित घटक प्रतिक्रिया के रूप में, प्रतिक्रिया-async घटक अलग .js में पूरे घटक लोड होगा हुड के तहत उद्देश्य पर फ़ाइल।