jQuery trong thành phần phản ứng

Question

Tôi có một ứng dụng web được xây dựng với phản ứng. Trong ứng dụng này tôi cũng có một số trang với mã jQuery từ một phiên bản cũ. Ngay bây giờ điều này được trả lại phía máy chủ và tôi phải tải toàn bộ tập tin ejs với mã jQuery và jQuery-UI trong các thẻ script với menu điều hướng của riêng nó. (Hầu như 1000 dòng mã jQuery)

Điều này có nghĩa là tôi phải tạo một menu điều hướng khác cho các trang jQuery này.

Tôi muốn hiển thị mã phụ thuộc jQuery này trong "div nội dung" của mình để tôi vẫn có thể sử dụng menu phản hồi sử dụng bộ định tuyến phản ứng. Tôi muốn kết xuất nó như một thành phần. Nhưng tôi không biết đây có phải là giải pháp tốt nhất hay không.

Tôi đã đọc rất nhiều ví dụ về cách thức này có thể được thực hiện, nhưng tôi không biết được trong số họ để đi cho và tôi đã được strugling để làm cho họ làm việc

Giống như thể hiện trong ví dụ này: Adding script tag to React/JSX Ví dụ này thêm thẻ script trong componentWillMount

Hoặc với nhập khẩu và yêu cầu như ví dụ sau: How to add script tag in React/JSX file?

tôi không thể thực hiện các giải pháp này làm việc mà không cần cài jQuery qua NPM.

Tôi chưa cài đặt jQuery qua npm vì tôi biết điều này sẽ ảnh hưởng đến kích thước gói của tôi cho phần còn lại của ứng dụng và tôi chỉ đang sử dụng jQuery cho một vài trang của mình. Người dùng không thực sự cần tải jQuery cho phần còn lại của ứng dụng

Bạn đề xuất gì trong tình huống như thế này? Giải pháp tốt nhất cho hiệu suất và trải nghiệm người dùng là gì?

Answer 1

Hãy xem react-async-component. thành phần của bạn có thể trông giống như:

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

Và wrapper trong tập tin riêng biệt:

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

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

hơn bạn có thể sử dụng nó như thường xuyên phản ứng thành phần, phản ứng-async-phần sẽ tải toàn bộ thành phần trong .js riêng tập tin vào mục đích dưới mui xe.