Yêu cầu thg 1 9, 2020 4:01 SA 186 0 4
  • 186 0 4
+3

Jquery & Reactjs

Chia sẻ
  • 186 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 CÂU TRẢ LỜI


Đã trả lời thg 1 9, 2020 4:04 SA
+2

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

Chia sẻ
Avatar Tom Hagen @tomhagen
thg 1 9, 2020 4:12 SA

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.

thg 1 9, 2020 4:15 SA

@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 😄

Avatar Tom Hagen @tomhagen
thg 1 9, 2020 6:46 SA

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
})
Đã trả lời thg 1 9, 2020 4:14 SA
Chia sẻ
Đã trả lời thg 1 9, 2020 4:06 SA
+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

Chia sẻ
Đã trả lời thg 2 5, 2020 1:51 SA
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.
Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí