Asked Jan 9th, 4:01 AM 152 0 4
  • 152 0 4
+3

Jquery & Reactjs

Share
  • 152 0 4

Chào các bác, em muốn hỏi cách viết lại code từ Jquery như bên dưới sang Reactjs. Lý do là rất nhiều thư viện đã được viết với Jquery, giờ code React muốn dùng cái tương tự như vậy thì chỉ có cách tìm cái nào đã được cộng đồng viết riêng cho React, nhưng không phải lúc nào cũng được như mong muốn, nhiều khi chức năng bị hạn chế hơn nhiều. Vậy nên em xin mạn phép hỏi câu hơi ngu ngơ là có cách nào chuyển được tù Jquery qua không ? Em xin cảm ơn.

Đây là example, ví dụ chuyển đoạn code này thì các bác viết lại sao ?

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

4 ANSWERS


Answered Jan 9th, 4:04 AM
+2

Bạn có thể tham khảo package này của React nhé: https://react-slick.neostack.com/docs/example/responsive

Share
Tom Hagen @tomhagen
Jan 9th, 4:12 AM

ah thanks b, cái này mình lấy làm ví dụ thôi b, chứ thực ra có rất nhiều cái cộng đồng chưa viết lại bằng reactjs. Ý mình đang hỏi có cách nào chuyển được giống như mình đề cập hay không.

0
| Reply
Share
Jan 9th, 4:15 AM

@tomhagen vậy không có cách nào tự chuyển đâu bạn chỉ có tự code lại thôi còn cộng đồng React khá lớn và cũng có rất nhiều thư viện hỗ trợ rồi nhưng có thể nhiều thư viện đã hỗ trợ cái bạn cần rồi nhưng chưa có docs nên bạn sẽ phải tìm kĩ hơn qua các cái issue trên repo của thư viện đó. Cá nhân mình cũng đã từng dùng thư viện React như chưa thấy docs cho 1 chức năng mình cần nhưng thực tế khi tìm trong issue trên repo github thì đã có người nhắc đến và có cả cách làm rồi 😄

0
| Reply
Share
Tom Hagen @tomhagen
Jan 9th, 6:46 AM

Thanks b. Mình đi dạo có thấy người ta viết lại từ Jquery

  cellAlign: 'left',
  contain: true
});

thành như vầy, nên nếu thằng nào tìm bên React chưa có, mình có thể viết lại kiểu vầy đc nhỉ ?

var elem = document.querySelector('.main-carousel')
var flkty = new Flickity( elem, {
  // options
  cellAlign: 'left',
  contain: true
})
0
| Reply
Share
Answered Jan 9th, 4:14 AM
Share
Answered Jan 9th, 4:06 AM
+1

Theo cá nhân mình nghĩ thì cũng có rất nhiều thư viện hỗ trợ reactjs. Do đó, để tối ưu nhất thì bạn có thể tìm những thư viện tương tự như những cái bạn đang muốn chuyển sang

Share
Answered Feb 5th, 1:51 AM
0
  • Đơn giản bạn chỉ cần ném hết code sử dụng thư viện Jquery vào cái componentDidUpdated (LifeCycle Method) thôi.
  • Mình khuyên bạn không nên dùng Jquery trong project ReactJs. Jquery thao tác trực tiếp trên real DOM sẽ ảnh hưởng tới quá trình compare và update từ Virtual DOM sang Real DOM của React. Trên Viblo cũng đã có bài về vụ này.
Share