+3
Jquery & Reactjs
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
}
}
})
Thêm một bình luận
4 CÂU TRẢ LỜI
+2
Bạn có thể tham khảo package này của React nhé: https://react-slick.neostack.com/docs/example/responsive
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.
@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 
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
})
+2
Bạn tham khảo các thư viện có sẵn support carosel:
+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
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.
