frontend 相关问题

Next.js React 应用程序不会在单击链接时加载更新的页面

我正在使用 Next.js 版本 14、应用程序路由器和 next/link 中的 Next.js 的链接组件。文件结构：文件夹app/a包含： page.tsx 获取 API，并将数据传递给 我正在使用 Next.js 版本 14、App 路由器和来自 next/link 的 Next.js 链接组件。文件结构：文件夹app/a包含： page.tsx 获取 API，并将数据传递到 <Table/> 组件... Table.tsx，带有 "use client" 的客户端组件。整个表格组件是客户端，因为我使用的是 Mantine 的表格 在 localhost:3000/a，我有一个表，其中填充了来自 API 的数据。该表中的一列有 Link，其 href 设置为 localhost:3000/a?param=x。单击该链接应该会转到同一个表，但该列已被过滤。当我点击链接时，我可以看到浏览器地址栏中的 URL 正确更新，但页面似乎没有更新。但是，刷新页面（现在使用新 URL）会加载更新后的预期表。另外，右键单击 -> 在新选项卡中打开确实会在新选项卡中加载正确的数据。 当我查看 VSCode 控制台时，我可以看到单击链接时正在使用参数获取 API。我注意到，单击链接时，GET /a?param=x不会打印到控制台，但是当我刷新页面（具有链接的URL）时，GET /a?param=x打印并显示正确的数据。 此问题仅针对/a上的链接，前往/a?param=x，不适用于从/a到/b。 我做了一些挖掘，发现将密钥从我的服务器组件（页面）传递到客户端组件（表）——其中key={query_param}——解决了这个问题。我相信这些概念被称为 Next 的“部分渲染”和“软导航”？ https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#4-partial-rendering 非 Next.js 特定：当路由参数更改时组件不会重新挂载

如何为 vuetify 3 组合框添加 onselect

嗨，如何为 vuetify 3 组合框添加 onselect？ 嗨，如何为 vuetify 3 组合框添加 onselect？ <v-combobox v-model="values1" :items="uniq" class="flex-full-width mt-5" density="comfortable" placeholder="Suche..." append-inner-icon="mdi-magnify" variant="outlined" no-filter @update:modelValue="toogle" @update:search="updateForCustomerSearch" /> 当出现下拉列表并单击下拉列表时，我希望执行特定的方法。 但只有当我从下拉菜单中选择时。 亲切的问候 塞维林 查看文档以找到 onSelect 事件。 <VCombobox :value="props.value" :items="dataList"> <template #item="{ props }"> <VListItem v-bind="props" @click="handleOnSelect(props?.value)" /> </template> </VCombobox>

Vue 的“组件已成为响应式对象”警告

我使用 DefineComponent 语法和模板编写了一个组件，如下所示： 从 './MySvgComponent.vue' 导入 MySvgComponent const MyComponent = 定义组件({ 组合...</desc> <question vote="1"> <p>我使用 <pre><code>defineComponent</code></pre> 语法和模板编写了一个组件，如下所示：</p> <pre><code>&lt;script&gt; import MySvgComponent from &#39;./MySvgComponent.vue&#39; const MyComponent = defineComponent({ components: { MySvgComponent }, template: ` &lt;div&gt;&lt;MySvgComponent /&gt;&lt;/div&gt; `, }) &lt;/script&gt; </code></pre> <p>出于某种原因，当我这样做时，我收到以下警告：</p> <p>“Vue 接收到一个被设为响应式对象的组件。这可能会导致不必要的性能开销，应该通过使用 <pre><code>markRaw</code></pre> 标记组件或使用 <pre><code>shallowRef</code></pre> 代替 <pre><code>ref</code></pre> 来避免”</p> <p>这里的解决方案是将导入的组件包装在markRaw或shallowRef中，这可以解决警告，如下所示：</p> <pre><code>&lt;script&gt; import { markRaw } from &#39;vue&#39; import MySvgComponent from &#39;./MySvgComponent.vue&#39; const MyRawSvgComponent = markRaw(MySvgComponent); const MyComponent = defineComponent({ components: { MyRawSvgComponent }, template: ` &lt;div&gt;&lt;MyRawSvgComponent /&gt;&lt;/div&gt; `, }) &lt;/script&gt; </code></pre> <p>为什么这可以解决警告？</p> <p>根据文档，将 Javascript 对象包装在 <pre><code>markRaw</code></pre> 中似乎会返回原始对象的非代理版本。为什么我们需要在这里这样做，以及我们使用 <pre><code>markRaw</code></pre> 或 <pre><code>shallowRef</code></pre> 函数解决的性能问题到底是什么？</p> </question> <answer tick="false" vote="0"> <p>文档中有全部解释。</p> <p>问题是</p> <ol> <li><p>组件实例比普通 DOM 节点昂贵得多，并且由于抽象模式而创建太多组件实例会产生性能成本。<br/> <a href="https://vuejs.org/guide/best-practices/performance.html#avoid-unnecessary-component-abstractions" rel="nofollow noreferrer">阅读更多</a></p> </li> <li><p>此外，Vue 的反应性系统默认是深的。虽然这使得状态管理变得直观，但当数据大小很大时，它确实会产生一定程度的开销，因为每个属性访问都会触发执行依赖项跟踪的代理陷阱。在处理大量深层嵌套对象时，这一点通常会变得很明显，其中单个渲染需要访问 100,000 多个属性，因此它应该只影响非常特定的用例。<br/> <a href="https://vuejs.org/guide/best-practices/performance.html#reduce-reactivity-overhead-for-large-immutable-structures" rel="nofollow noreferrer">阅读更多</a></p> </li> </ol> <p>为了避免这些问题，需要标记没有shallowRef或markRaw()的Vue组件实例/对象，这是为了确保优化和性能。</p> <p><pre><code>shallowRef</code></pre>通常用于大型数据结构的性能优化，或与外部状态管理系统的集成。 <br/> <a href="https://vuejs.org/api/reactivity-advanced.html#shallowref" rel="nofollow noreferrer">阅读有关浅引用的更多信息</a></p> 另一方面，<p><pre><code>markRaw()</code></pre> 标记一个对象，使其永远不会被转换为代理。返回对象本身。 <br/> <a href="https://vuejs.org/api/reactivity-advanced.html#markraw" rel="nofollow noreferrer">阅读有关 markRaw() 的更多信息</a></p> </answer> </body></html>

Hugo 网站未在 Github 页面中呈现

我试图在部署后在 Github 页面上正确地可视化我的投资组合，但没有成功，并且我对问题可能是什么已经没有想法了。 问题： 实时页面显示“...

React Hook 表单验证不会阻止使用 useController 自定义钩子提交表单

我在项目中使用 React Hook Form 来处理表单验证。我有一个自定义钩子 useFormField ，它与 React Hook Form 中的 useController 集成。但是，我遇到了一个问题...

如何按预期设计卡片样式，1/3 为白色背景，1/3 为模糊，其余为常规图片

(https://i.sstatic.net/3fuhjClD.png) 看图片，我当前的卡片样式不正确。模糊效果堆叠在整个卡片上，而不是仅堆叠在卡片的中间 1/3 处。 图片

网格布局与采用 TailwindCSS 等框架的 Flexbox。为什么要使用网格布局？ [已关闭]

正如标题所说。如果我使用像 tailwindCSS 这样的框架和 React，为什么我会选择使用网格布局？我绝对理解网格作为具有更多功能的二维布局的用例

如何防止 Android 应用程序嵌入我的网站

我正在尝试找出一种方法来阻止开发人员将我的网站嵌入到他们的 Android 应用程序中。我尝试过用户代理嗅探，但遇到了一个问题，我不小心阻止了 Android...

如何在react js中将对象转换为字符串

如何在react js中将对象转换为字符串 var numeroToken = this.getSearchParams(); 获取搜索参数（k）{ var p={}; location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,

如何从组件获取变量并放在App.js上

即使在互联网上搜索我也没有找到，或者说我不明白。 我的问题：我希望在 InputField.js 组件中找到“inputVal”变量...

如何让导航栏显示在英雄上方

<!-- Nav bar Contains links to self and other pages --> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="./index.html"> <img src="#" alt="Logo" width="55" height="30" class="d-inline-block align-text-top"> ..... </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> </header> <!-- Contains main Contents of the page --> <main> <!-- Hero 1 - Bootstrap Brain Component --> <section id = "hero" class="bsb-hero-1 px-3 bsb-overlay bsb-hover-pull" style="background-image: url('./assets/img/hero-img-1.jpg');"> <div class="container-fluid"> <div class="row justify-content-md-center"> <div class="col-12 col-md-11 col-lg-9 col-xl-7 col-xxl-6 text-center text-white"> <h2 class="display-3 fw-bold mb-3">Art of Design</h2> <p class="lead mb-5">Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.</p> <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> <button type="button" class="btn bsb-btn-xl btn-light gap-3">Free Consultation</button> </div> </div> </div> </div> </section> 我想让英雄部分固定在导航栏下方，当导航栏缩小时，我希望折叠项目显示在英雄上方，我应该怎么做才能使英雄位于导航栏下方？ 要使用 Bootstrap 将小屏幕导航栏放置在英雄上方，可以使用 offcanvas 组件。您可以在这里查看： https://getbootstrap.com/docs/5.3/components/offcanvas/

React：水平溢出 x 滚动不适用于 Tailwind CSS 中的 Flex 容器

h1s 的宽度对于移动设备来说太大了，所以我想添加一个可滚动属性，但溢出 x 滚动不起作用 ... h1s 的宽度对于移动设备来说太大了，所以我想添加一个可滚动属性，但溢出 x 滚动不起作用 <div> <div className="mt-16"> <div className="flex "> <div className="hidden md:block font-semibold "> </div> <div> <div className=" px-4 "> <img src="images/Dashboard.jpg" className="rounded-xl w-full " /> <div className=" flex justify-center"> <img src="images/UserDashboard.jpg" className="rounded-full w-28 -mt-16 border-[0.3rem] border-white" /> </div> <div className="flex justify-center items-center gap-1"> <h1 className="text-center text-2xl font-semibold"> Ella Solis </h1> <MdVerified className=" text-blue-500 text-2xl" /> </div> <div className="flex mt-3 items-center gap-2 text-gray-700 justify-center"> <span className="">0 WishList</span> <FaDiamond className="items-center text-[0.5rem] text-gray-500" /> <span className="">0 Voucher</span> </div> <div className="mt-8 w-full"> <div className="overflow-x-auto"> <div className="flex gap-16 text-xs overflow-x-scroll whitespace-nowrap md:gap-12 md:text-lg"> <h1 className={`${showForm === "dashboard" ? "border-b-2 border-[#0D4C90]" : ""}`} onClick={() => handleButtonClick("dashboard")} > Dashboard </h1> <h1 className={`${showForm === "userSettings" ? "border-b-2 border-[#0D4C90]" : ""}`} onClick={() => handleButtonClick("userSettings")} > Profile </h1> <button className={`${showForm === "shippingInformation" ? "border-b-2 border-[#0D4C90]" : ""}`} onClick={() => handleButtonClick("shippingInformation")} > Shipping Information </button> <button className={`${showForm === "orderHistory" ? "border-b-2 border-[#0D4C90]" : ""}`} onClick={() => handleButtonClick("orderHistory")} > Order History </button> <button className={`${showForm === "wishlist" ? "border-b-2 border-[#0D4C90]" : ""}`} onClick={() => handleButtonClick("wishlist")} > Wishlist </button> <button className={`${showForm === "review" ? "border-b-2 border-[#0D4C90]" : ""}`} onClick={() => handleButtonClick("review")} > Review </button> </div> </div> </div> {showForm === "dashboard" && ( <div> <Dashboard /> </div> )} {showForm === "userSettings" && ( <div> <UserSettings /> </div> )} {showForm === "shippingInformation" && ( <ShippingInformation/> )} {showForm === "orderHistory" && ( <div> <OrderHistory /> </div> )} {showForm === "wishlist" && ( <div className=""> <Wishlist /> </div> )} {showForm === "review" && ( <div className=""> <Review /> </div> )} </div> </div> </div> </div> </div> 所以我尝试使用 Overflow-x-scroll 属性，但它不起作用，我什至使用隐藏的溢出来检查，但它不起作用，我尝试删除容器，因为我认为它可能导致错误，但即使这似乎没有任何改变 通过 display: flex 类的高级 flex 应用样式隐式地将 min-width: min-content 应用于其子级。这意味着子级的宽度不会缩小到低于其 min-content 宽度。因此，overflow-x-scroll永远不会小于其内容。 要解决此问题，请考虑用更小的值覆盖 min-width 值，例如通过 0 类覆盖 min-w-0： const { useState } = React; const MdVerified = ({ ...props }) => <div {...props}>MdVerified</div> const FaDiamond = ({ ...props }) => <div {...props}>FaDiamond</div> const Dashboard = ({ ...props }) => <div {...props}>Dashboard</div> const UserSettings = ({ ...props }) => <div {...props}>UserSettings</div> const ShippingInformation = ({ ...props }) => <div {...props}>ShippingInformation</div> const OrderHistory = ({ ...props }) => <div {...props}>OrderHistory</div> const Wishlist = ({ ...props }) => <div {...props}>Wishlist</div> const Review = ({ ...props }) => <div {...props}>Review</div> function App() { const [showForm, setShowForm] = useState(); const handleButtonClick = (id) => { setShowForm(id); }; return ( <div> <div className="mt-16"> <div className="flex "> <div className="hidden md:block font-semibold "></div> <div className="min-w-0"> <div className=" px-4 "> <img src="https://picsum.photos/1024/96" className="rounded-xl w-full " /> <div className=" flex justify-center"> <img src="https://picsum.photos/112/112" className="rounded-full w-28 -mt-16 border-[0.3rem] border-white" /> </div> <div className="flex justify-center items-center gap-1"> <h1 className="text-center text-2xl font-semibold"> Ella Solis </h1> <MdVerified className=" text-blue-500 text-2xl" /> </div> <div className="flex mt-3 items-center gap-2 text-gray-700 justify-center"> <span className="">0 WishList</span> <FaDiamond className="items-center text-[0.5rem] text-gray-500" /> <span className="">0 Voucher</span> </div> <div className="mt-8 w-full"> <div className="overflow-x-auto"> <div className="flex gap-16 text-xs overflow-x-scroll whitespace-nowrap md:gap-12 md:text-lg"> <h1 className={`${showForm === 'dashboard' ? 'border-b-2 border-[#0D4C90]' : ''}`} onClick={() => handleButtonClick('dashboard')} > Dashboard </h1> <h1 className={`${showForm === 'userSettings' ? 'border-b-2 border-[#0D4C90]' : ''}`} onClick={() => handleButtonClick('userSettings')} > Profile </h1> <button className={`${showForm === 'shippingInformation' ? 'border-b-2 border-[#0D4C90]' : ''}`} onClick={() => handleButtonClick('shippingInformation')} > Shipping Information </button> <button className={`${showForm === 'orderHistory' ? 'border-b-2 border-[#0D4C90]' : ''}`} onClick={() => handleButtonClick('orderHistory')} > Order History </button> <button className={`${showForm === 'wishlist' ? 'border-b-2 border-[#0D4C90]' : ''}`} onClick={() => handleButtonClick('wishlist')} > Wishlist </button> <button className={`${showForm === 'review' ? 'border-b-2 border-[#0D4C90]' : ''}`} onClick={() => handleButtonClick('review')} > Review </button> </div> </div> </div> {showForm === 'dashboard' && ( <div> <Dashboard /> </div> )} {showForm === 'userSettings' && ( <div> <UserSettings /> </div> )} {showForm === 'shippingInformation' && <ShippingInformation />} {showForm === 'orderHistory' && ( <div> <OrderHistory /> </div> )} {showForm === 'wishlist' && ( <div className=""> <Wishlist /> </div> )} {showForm === 'review' && ( <div className=""> <Review /> </div> )} </div> </div> </div> </div> </div> ); } ReactDOM.createRoot(document.getElementById('app')).render(<App />); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.tailwindcss.com/3.4.5"></script> <div id="app"></div>

我正在使用带有formcontrol的角度kolkov编辑器，必须在我的编辑器中绑定html

html代码： html代码： <angular-editor [placeholder]="'Enter task...'" formControlName="task_note" [config]="editorConfig"> </angular-editor> <div class="icon" style="cursor: pointer" (click)="editTaskbtn(task)" (click)="openTask(cont)"> <img src="assets/Deals Icons/Edit icon.svg" style="height: 24px" alt="" srcset="" /> </div> .ts 文件： editorConfig: AngularEditorConfig = { 可编辑：真实， 拼写检查：正确， 高度：'自动'， 最小高度：'0'， 最大高度：'自动'， 宽度：'自动'， 最小宽度：'0'， 翻译：“是”， 启用工具栏：true， 显示工具栏：真， 默认段落分隔符：''， 默认字体名称：''， 默认字体大小：''， 字体：[ { 类：'arial'，名称：'Arial' }， { class: 'times-new-roman', name: 'Times New Roman' }, { 类：'calibri'，名称：'Calibri' }， { class: 'comic-sans-ms', name: 'Comic Sans MS' }, ], 自定义类：[ { 名称：'报价'， 类：'报价'， }, { 名称：'红色文本'， 类：'红色文本'， }, { name: '标题文本', 类：'标题文本'， 标签： 'h1', }, ], uploadUrl: 'v1/图片', uploadWithCredentials：假， 消毒：假， 工具栏位置：'顶部'， 工具栏隐藏按钮：[ [ '撤消', '重做', '删除线', '下标', '上标', '缩进', '突出'， '标题'， ], [ '文字颜色', '背景颜色', '自定义类', '关联'， '取消链接', '插入图片', '插入视频', '插入水平规则', '删除格式', '切换编辑器模式', ], ], }; 表单控制： private _initTasksForm() { this.tasksFormGroup = this.formBuilder.group({ contact_owner: ['', Validators.required], priority: ['', Validators.required], task_type: ['', Validators.required], task_reminder: ['', Validators.required], custom_reminder: [''], date_time: ['', Validators.required], task_note: ['', Validators.required], isClosed: [''], }); } 要绑定的数据 { "_id": "670cb62498a51532489dd41f", "customer_id": "OGYCON1728883573551", “创建者”：“OGYU1728878104362”， “类型”：“任务”， “优先级”：“无”， “参数”：{ "contact_owner_unqid": "OGYU1728878104362", “优先级”：“无”， "task_type": "待办事项", "task_reminder": "无提醒", “自定义提醒”：“”， "date_time": "2024-10-18T06:11:32.000Z", "task_note": "tesssdecfecfc", “isClosed”：假， "contact_owner": "userabc", "contact_name": "无名" }, "unqid": "OGYPRO1728886308384", "org_id": "ORG1728531905160", “创建时间”：“2024-10-14T06：11：48.451Z”， “updated_at”：“2024-10-14T06：11：48.451Z”， “__v”：0 } when submitting the data using the editor data is saved as HTML, but after that when I open the editor to view the data to get edit, in angular kolkov editor data is displayed as <ul><li>ccccc</li><li>aaaa</li><li>bbbb</li></ul> private _setTasksData(task) { .... this.tasksForm?.['task_note'].setValue( this.transform(task.param.task_note) ); } transform(value: any): any { return value.split('&lt;').join('<').split('&gt;').join('>'); } 上面的代码解决了我的问题，代码现在可以运行。

JSON 比较

有人可以建议一种在 React.js 中比较两个 JSON 对象的方法吗？ 我们正在寻找一种类似于 GitHub 如何显示提交差异的解决方案 - 突出显示两个对象侧之间的更改...

MUI Toolpad 核心仪表板布局内容无法填满所有可用空间

我在前端使用 MUI Toolpad 核心仪表板布局，但我无法充分利用内容方面的所有可用空间。 我在这里使用教程中的演示代码： 呃...

WebSocket在连接建立前关闭调试失败解决办法

当我运行 vite 应用程序时，我不断收到错误：“WebSocket 在建立连接之前已关闭”记录到我的控制台。我已经尝试了我所知道的一切来解决这个错误...

无网格系统的响应式网页设计

我正在做一个关于响应式网页设计（RWD）的项目。 像 Bootstrap 或 Foundation 或 960 这样的框架使用网格系统作为基本布局。 我专门在寻找解决方案（框架）......

无法在 Webpack 中使用 html-loader 在主 HTML 文件中包含 HTML 部分

#emergencyHelpNeeded 我是一个初学者，正在学习一些前端人员。我最近三天一直在努力解决这个问题。我正在尝试使用 Web 中的 html-loader 将 HTML 部分包含到我的主 HTML 文件中...

汉堡菜单无法滑动

我想制作汉堡菜单单击汉堡图标（复选框）时滑动 我想制作汉堡菜单<HamburgerMenu className="Hamburger-Menu" id="HamMenu" style={styles}/>在单击汉堡图标（复选框）时滑动<Hamburger id="ham-icon"/>在CSS中使用#ham-icon input[type="checkbox"]:checked + .Hamburger-Menu但不起作用 Header.jsx： import React, { useState, useEffect } from "react" import Logo from "./icons/Logo.jsx" import Hamburger from './icons/Hamburger.jsx' import HamburgerMenu from './HamburgerMenu.jsx' function Header(){ const [headerHeight, setHeaderHeight] = useState() const [windowWidth, setWindowWidth] = useState(window.innerWidth) useEffect(() => { const HamMenu = document.getElementById("HamMenu") const Header = document.getElementById("top-bar") const HamMenuRect = HamMenu.getBoundingClientRect() const HeaderRect = Header.getBoundingClientRect() setHeaderHeight(HeaderRect.height) console.log(HeaderRect.height) }, [] ) const styles = { '--Header-Height' : headerHeight + 'px', '--Window-Width+5' : windowWidth+5 + 'px', } return( <div className="Header" id="top-bar"> <Logo fill='black' width='70px' height='70px'/> <div className="button-container"> <button> Products </button> <button> Services </button> <button> Company </button> <button> Pricing </button> </div> <div> <Hamburger id="ham-icon"/> <HamburgerMenu className="Hamburger-Menu" id="HamMenu" style={styles}/> </div> </div> ) } export default Header Hamburger.jsx（复选框）： import React from "react"; import styles from './Hamburger.module.css' function Hamburger({...props}){ return ( <label className={styles.burger} {...props} htmlFor="burger"> <input type="checkbox" id="burger"/> <span /> <span /> <span /> </label> ); }; export default Hamburger; 汉堡菜单.jsx： import { useEffect } from "react" function HamburgerMenu({HamburgerMenu, ...props}){ return( <div className={HamburgerMenu} {...props}> <ul> <li>Portfolio</li> <li>Blog</li> <li>About</li> <li>Login</li> <li>Language: EN</li> </ul> </div> ) } export default HamburgerMenu 索引.css： *{ padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; } body{ overflow-x: hidden; } /* Header.jsx */ .Header{ display: flex; justify-content: space-between; align-items: center; background-color: rgb(0, 186, 114); width: 100%; box-sizing: border-box; padding: 8px 50px; } .button-container{ display: flex; justify-content: center; gap: 50px; width: 100%; } .button-container button{ padding: 8px 12px; font-size: 22px; border: none; border-radius: 5px; background-color: rgba(255, 255, 255, 0); color: white; cursor: pointer; } .button-container button:hover{ background-color: hsla(0, 0%, 0%, 0.3); } .button-container button:active{ background-color: hsla(0, 0%, 0%, 0.2); } .Hamburger-Menu{ position: absolute; background-color: hsl(0, 0%, 89%); top: var(--Header-Height); /* from Header.jsx */ left: 100vw; border: 5px solid hsl(0, 0%, 80%); border-radius: 5px; margin-top: 10px; padding: 40px 20px; transition: all 0.5s ease-in; } .Hamburger-Menu ul{ list-style-type: none; white-space: nowrap; } #ham-icon input[type="checkbox"]:checked + .Hamburger-Menu{ right: 0vw; } 您的 checkbox 不是 .Hamburger-Menu 元素的同级元素，因此相邻或通用同级选择器在这种情况下不起作用。 尝试一下#top-bar:has(#burger:checked) .Hamburger-Menu

尝试将项目从Webpack迁移到Vite后，JS代码无法执行

我用一个 Webpack 配置为 JS Worker 构建一个单独的包（它必须位于一个单独的文件中），一切运行良好。这是 webpack 配置： const 路径 = 需要...