2017-11-28 95 views
6

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)jQuery tepki bileşeninde

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?

+0

Bu jQuery bağımlı sayfalarla iki yönlü iletişime sahip olmanız mı gerekiyor? Değilse, neden onları biraz soyup, bir iframe ile yükleyin. En performanslı çözüm olmayabilir, ama en basit olanı. – asosnovsky

+0

Bazı global değişkenleri tepki uygulamasından kullanmalıyım, ancak çıktı ajax ve node.js – Koiski

+0

Btw'de yazılan API uç noktaları aracılığıyla veritabanında depolanır. Uygulama, jquery-ui ile çok fazla sürükle ve bırak etkileşimi kullanır. Iframe – Koiski

cevap

5

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.

+0

olabilir umut verici görünüyor, ama jQuery alma yolu jQuery npm aracılığıyla jQuery yüklemeniz gerektiği anlamına gelir ki jQuery paket dosyamı gerçekten etkiler mi? – Koiski

+0

@Koiski, bildiğim kadarıyla, parçayla ayrıştırmak için jquery eklemelidir. Dolayısıyla jquery, yalnızca kullanıcı bu asenkron bileşenini içeren bir sayfayı açtığında yüklenir. –

+0

Bu yaklaşımla, jQuery ile doğrudan DOM-manipülasyonunun sanal DOM reaksiyonunun çalışmasını bozacağından endişeleniyorum. Bunun hakkında bir fikrin var mı? – Koiski