jQuery tepki bileşeninde

Question

Tepkimeyle oluşturulmuş bir web uygulamasına sahibim. Bu uygulamada ayrıca eski bir sürümü jQuery kodu ile bazı sayfaları var. Şu anda bu sunucu tarafında oluşturulur ve ben kendi navigasyon menüsü ile script etiketlerinde jQuery ve jQuery-UI kodu ile tüm ejs dosyasını yüklemek zorunda. (Neredeyse 1000 satır jQuery kodu)

Bu, bu jQuery sayfaları için başka bir gezinme menüsü oluşturmam gerektiği anlamına gelir.

Bu jQuery bağımlı kodunu "içerik div" ımda oluşturmak istiyorum, böylece tepki veren yönlendirici kullanan tepki menüsünü kullanmaya devam edebilirim. Bunu bir bileşen gibi göstermek istiyorum. Ama bunun en iyi çözüm olup olmadığını bilmiyorum.

Bunu nasıl yapılacağının pek çok örnek okudum, ama ben gitmek için bunlardan hangisinin bilmiyorum ve ben onları bu örnekte gösterildiği

gibi çalışması için strugling edilmiştir: Adding script tag to React/JSX Bu örnek componentWillMount

yılında Or ve ithalat ile komut dosyası etiketleri bu örnekte olduğu gibi gerektirir ekler: How to add script tag in React/JSX file?

Ben bu çözümlerin NPM aracılığıyla jQuery yüklemeden işe gelemedi.

Henüz jQuery'yi npm ile yüklemedim çünkü uygulamanın geri kalan kısmı için paket boyutumu etkileyeceğini biliyorum ve yalnızca birkaç sayfam için jQuery kullanıyorum. Kullanıcı, uygulamanın geri kalanı için jQuery'yi yüklemeye gerçekten ihtiyaç duymuyor

Böyle bir durumda ne önerirsiniz? Performans ve kullanıcı deneyimi için en iyi çözüm hangisidir?

Answer 1

react-async-component'a bir göz atın. ayrı bir dosyada

// 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 

Ve sarmalayıcı: Sizin bileşen benzeyebilecek düzenli bileşeni tepki olarak kullanmadan daha

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

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

tepki zaman uyumsuz bileşenli ayrı Js tüm bileşeni yükleyecektir başlık altında dosya.