33
4
I'm trying to build a web app on Next JS with Tailwind UI provided React components. Tailwind UI is using headless ui behind the scenes.
我正在尝试建立一个下一个JS与尾风用户界面提供的反应组件的网络应用程序。顺风用户界面是在幕后使用无头用户界面。
By default, Next JS will build server side components, unless you add 'use client' at the top of a page. Unfortunately, this seems to be a requirement instead of an option in case of Tailwind UI provided code, otherwise it will throw an error like this on the picture.
默认情况下，Next JS将构建服务器端组件，除非您在页面顶部添加“使用客户端”。不幸的是，这似乎是必需的，而不是在TailWind UI提供代码的情况下的选项，否则它将在图片上抛出如下所示的错误。
So the question is, how to use Tailwind UI components (to move fast with the development without being a front-end genius), but still have the option to use server components with Next JS?
所以问题是，如何使用Tailwind UI组件（在不成为前端天才的情况下快速发展），但仍然可以选择使用Next JS的服务器组件？
Tried using Tailwind UI components without 'use client', but they throw an error. Only solution is to add 'use client' at the top of the .tsx (or .jsx) file.
已尝试在不使用客户端的情况下使用TailWind UI组件，但引发错误。唯一的解决方案是在.tsx(或.jsx)文件的顶部添加‘Use Client’。
You do everything right, this is the Next.js problem. I just wrote a broad explanation of this behaviour. Please see
https://stackoverflow.com/a/77077564/9047572
你做的每件事都是正确的，这就是Next.js的问题。我刚刚写了一篇关于这一行为的广泛解释。请参阅https://stackoverflow.com/a/77077564/9047572
TL:DR: you need that 'use client' directive to use client-only features. Once the component became client-side, its nested components are client-side too. No way to change or intercept this behavior.
TL：DR：您需要‘Use Client’指令才能使用仅限客户端的功能。一旦组件成为客户端，它的嵌套组件也是客户端。无法改变或拦截这种行为。
And TailwindCSS use some client-only features. Your error tells the same. It tells that headlessui.esm.js is a client-only component, so you can use this library in client-side components only.
Tailwincss使用一些仅限客户端的功能。你的错误也说明了这一点。它告诉我们，headlessui.esm.js是一个仅限客户端的组件，因此您只能在客户端组件中使用该库。
"Headless" doesn't mean it doesn't use some client-only bindings :)
“Headless”并不意味着它不使用某些仅限客户端的绑定：)
P.S. Short list of "client-only" features. Basically Nextjs will show you them in its errors, but anyway...
附注：“仅限客户端”功能的简短列表。基本上，Nextjs会在它的错误中向你展示它们，但无论如何...
个人中心
文章发布
退出react-dom, cause there is no possibility of DOM manipulation on the server sideYou better read the docs here
你最好读一下这里的文件
P.P.S. Looks like there is another directory 'use server', which I didn't know of 2 days ago. Worth checking.
另外，好像还有另外一个目录‘USE SERVER’，2天前我还不知道呢。值得一查。
Thanks a lot! Can I ask you to edit your answer and a brief list of those "client-only" features? I'm a senior engineer but quite noob when it comes to front-end, especially React and NextJS. I would use your list to research the docs, and research the headlessui files themselves, so that I can use the components more consciously, especially when building out their hierarchy
非常感谢!我可以要求您编辑您的答案和那些“仅限客户端”功能的简短列表吗？我是一名高级工程师，但在前端，特别是Reaction和NextJS方面，我相当新手。我会使用您的列表来研究文档，并研究HeadlesSui文件本身，这样我就可以更有意识地使用这些组件，特别是在构建它们的层次结构时
33
4
0
情况我想使用 ui-date 在我的应用程序中设置/编辑日期。我使用最新稳定版本的 Angular、Angular-UI、JQuery-UI 等。 问题一旦使用日期选择器选择了日期，我的模型中的日期将
编辑: jQuery UI 可选择小部件内置了一个回调，stop，我需要知道如何以编程方式触发此事件。 (措辞不佳)我已将事件监听器附加到 jQuery UI Selectable Widget 。如
我正在尝试建立一个下一个JS与尾风用户界面提供的反应组件的网络应用程序。顺风用户界面是在幕后使用无头用户界面。。默认情况下，Next JS将构建服务器端组件，除非您在页面顶部添加“使用客户端”。不幸的
我正在尝试建立一个下一个JS与尾风用户界面提供的反应组件的网络应用程序。顺风用户界面是在幕后使用无头用户界面。。默认情况下，Next JS将构建服务器端组件，除非您在页面顶部添加“使用客户端”。不幸的
我正在尝试应用这个 SlickGrid 示例: http://mleibman.github.com/SlickGrid/examples/example4-model.html 到我自己的网络项目。
我想整理我的 Schemas为我的实体类生成，DTO 类位于 Springdoc ui . 我可以对 tags 进行排序和 operations通过以下配置 yml文件，但我的模式不是按排序顺序排列的
有谁知道阻止 ui-sref 重新加载状态的方法吗？ 我无法通过“$stateChangeStart”事件执行此操作，因为 ui-sref 仅更改参数而不更改状态名称。 我的左边是书单，左边是书的详细
我正在 jquery ui 对话框中使用 jquery ui 自动完成小部件。当我输入搜索文本时，文本框缩进(ui-autocomplet-loading)但不显示任何建议。 var availabl
我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但我很难找到如何将数据从 draggable 对象中删除。 我的代码是这样的...... var viewMode
Kendo UI Web 和 Kendo UI Core 之间有什么区别 https://www.nuget.org/packages/KendoUIWeb http://www.nuget.org/
我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但是我很难找到如何从 draggable 对象中删除数据。 我的代码是这样的…… var viewModel =
使用 Angular JS - UI 路由器，我需要从我的父 View project.details 到我的 subview project.details.tasks 进行通信。我的 subvie
KendoUI 版本 2013.3.1119使用 Kendo MVVM 我有一个我构建的颜色选择器，它使用平面颜色选择器和使用调色板的颜色选择器。它们都可以正常运行，但平面颜色选择器的布局已关闭， s
我在非 UI 线程上，我需要创建并显示一个 SaveDialog。但是当我尝试显示它时:.ShowDialog() 我得到: "An unhandled exception of type 'Syst
我正在试验 jquery-ui 并查看和克隆一些示例。在一个示例(自动完成的组合框)中，我看到一个带有 ui-widget 类的 anchor (a) 元素，它与包含的 css 文件中的 .ui-wi
我需要返回一个 UI 列表，我用这个方法: getList(): Observable { return this.httpClient.get("/api/listui").pipe
我有 ui-grids在 angular-ui-tabs ，它们位于 ng-if 中以避免呈现问题。如果有更多数据并且网格进入滚动模式，则单击选项卡时数据会完全消失。我相信这是一个 ui-grids-
这似乎是一个通用的问题，与其他几个 React 开源框架相比，我真的很喜欢 Material ui 的可扩展性。 问题 “@material-ui/core”和“@material-ui/lab”中的
我有一个根页面(index.html)，带有侧边栏(“菜单”)和主要内容 div(“主”)，因此有两个 ui-view div - 一个称为“菜单”，一个称为“主”。 当主要内容区域有网站列表 (/s
有人在http://jsfiddle.net/hKYWr/上整理了一个很好的 fiddle 。关于使用 angular-ui 和 jqueryui sortable 来获得良好的可排序效果。 如何在两
我是一名优秀的程序员,十分优秀！