Tôi đang cố gắng xây dựng một ứng dụng web trên Next JS với các thành phần React do Tailwind UI cung cấp. Giao diện Tailwind đang sử dụng Giao diện người dùng không đầu hậu trường.
Tôi đang cố gắng xây dựng một ứng dụng web JS tiếp theo với các thành phần phản ứng do Tailwind UI cung cấp. Giao diện người dùng Tailwind đang sử dụng giao diện người dùng không đầu ở hậu trường.
Theo mặc định, Next JS sẽ xây dựng các thành phần phía máy chủ, trừ khi bạn thêm 'use client' ở đầu trang. Thật không may, điều này có vẻ là một yêu cầu thay vì một tùy chọn trong trường hợp Tailwind UI cung cấp mã, nếu không nó sẽ gây ra lỗi như thế này trên hình ảnh.
Theo mặc định, Next JS sẽ xây dựng các thành phần phía máy chủ trừ khi bạn thêm "Sử dụng phía máy khách" ở đầu trang. Thật không may, đây dường như là một yêu cầu chứ không phải là một tùy chọn trong trường hợp TailWind UI cung cấp mã, nếu không nó sẽ đưa ra lỗi như bên dưới trên hình.
Vậy câu hỏi đặt ra là, làm thế nào để sử dụng các thành phần Tailwind UI (để phát triển nhanh mà không cần phải là chuyên gia về front-end) nhưng vẫn có tùy chọn sử dụng các thành phần máy chủ với Next JS?
Vì vậy, câu hỏi đặt ra là, làm cách nào để bạn sử dụng các thành phần UI TailWind (để thúc đẩy quá trình phát triển nhanh chóng mà không cần phải là thiên tài về giao diện người dùng) trong khi vẫn có tùy chọn sử dụng các thành phần máy chủ với Next JS?
Những gì tôi đã thử
Đã thử sử dụng các thành phần Tailwind UI mà không có 'use client', nhưng chúng báo lỗi. Giải pháp duy nhất là thêm 'use client' vào đầu .tsx (hoặc .jsx) tài liệu.
Đã thử sử dụng thành phần UI TailWind mà không có ứng dụng khách nhưng nó báo lỗi. Giải pháp duy nhất là thêm 'Use Client' vào đầu tệp .tsx (hoặc .jsx).
Thêm câu trả lời
Khuyến nghị câu trả lời tuyệt vời
Bạn làm mọi thứ đúng, đây là vấn đề của Next.js. Tôi vừa viết một lời giải thích chung về hành vi này. Vui lòng xem
https://stackoverflow.com/a/77077564/9047572
Bạn đang làm đúng mọi thứ, đó là vấn đề với Next.js. Tôi vừa viết một lời giải thích sâu rộng về hành vi này. Xem https://stackoverflow.com/a/77077564/9047572
TL:DR: bạn cần chỉ thị 'use client' để sử dụng các tính năng chỉ dành cho máy khách. Khi thành phần trở thành phía máy khách, các thành phần lồng nhau của nó cũng là phía máy khách. Không có cách nào để thay đổi hoặc chặn hành vi này.
TL:DR: Bạn cần có lệnh 'Sử dụng ứng dụng khách' để sử dụng chức năng chỉ dành cho ứng dụng khách. Khi một thành phần trở thành máy khách, các thành phần lồng nhau của nó cũng là máy khách. Không có cách nào để thay đổi hoặc ngăn chặn hành vi này.
Và TailwindCSS sử dụng một số tính năng chỉ dành cho khách hàng. Lỗi của bạn cũng tương tự. Nó cho biết rằng headlessui.esm.js là thành phần chỉ dành cho máy khách, do đó bạn chỉ có thể sử dụng thư viện này trong các thành phần phía máy khách.
Tailwincss chỉ sử dụng một số tính năng phía máy khách. Lỗi của bạn cũng minh họa điểm này. Nó cho chúng ta biết rằng headlessui.esm.js chỉ là thành phần phía máy khách, vì vậy bạn chỉ có thể sử dụng thư viện trong các thành phần phía máy khách.
"Không có giao diện" không có nghĩa là nó không sử dụng một số ràng buộc chỉ dành cho máy khách :)
"Không đầu" không có nghĩa là nó không sử dụng một số ràng buộc chỉ dành cho khách hàng :)
PS Danh sách ngắn các tính năng "chỉ dành cho máy khách". Về cơ bản Nextjs sẽ hiển thị chúng trong lỗi của nó, nhưng dù sao thì...
PS: Danh sách ngắn các tính năng "chỉ dành cho khách hàng". Về cơ bản, Nextjs sẽ hiển thị cho bạn các lỗi của nó, nhưng dù sao...
- Các hook useX từ React và Nextjs: useEffect, useState, useContext, useRouter, useNavigation...
- khá nhiều thứ từ
phản ứng-dom, vì không có khả năng thao tác DOM ở phía máy chủ
- trình lắng nghe sự kiện của trình duyệt như onChange.
Bạn nên đọc tốt hơn các tài liệu ở đây
Tốt nhất bạn nên đọc tài liệu ở đây
PPS Có vẻ như còn một thư mục khác là 'use server' mà tôi không biết đến 2 ngày trước. Đáng để kiểm tra.
Ngoài ra, dường như còn có một thư mục khác 'SỬ DỤNG MÁY CHỦ' mà tôi không biết khoảng 2 ngày trước. Đáng để kiểm tra.
Thêm câu trả lời
Cảm ơn rất nhiều! Tôi có thể yêu cầu bạn chỉnh sửa câu trả lời của bạn và danh sách ngắn gọn về các tính năng "chỉ dành cho khách hàng" không? Tôi là một kỹ sư cao cấp nhưng khá mới mẻ khi nói đến front-end, đặc biệt là React và NextJS. Tôi sẽ sử dụng danh sách của bạn để nghiên cứu tài liệu và nghiên cứu các tệp headlessui, để tôi có thể sử dụng các thành phần một cách có ý thức hơn, đặc biệt là khi xây dựng hệ thống phân cấp của chúng
Cảm ơn bạn rất nhiều! Tôi có thể yêu cầu bạn chỉnh sửa câu trả lời của mình và lập danh sách ngắn các tính năng "chỉ dành cho khách hàng" đó không? Tôi là một kỹ sư cấp cao nhưng tôi còn khá mới về front-end, cụ thể là React và NextJS. Tôi sẽ sử dụng danh sách của bạn để nghiên cứu tài liệu và nghiên cứu các tệp HeadlesSui để tôi có thể chủ ý hơn với các thành phần, đặc biệt là khi xây dựng hệ thống phân cấp của chúng
Trung tâm cá nhân
Điều phát hành
từ bỏ
4
Tôi là một lập trình viên xuất sắc, rất giỏi!