components 相关问题

统一建模语言中的一个组件“代表系统的模块化部分，它封装了其内容，其表现形式可在其环境中替换。组件根据提供的和所需的接口定义其行为”。组件的最佳示例可以在ActionScript-Flash，Flex sdks中找到。你有UI组件，如按钮，标签，DataGrids，可重复使用的图表，可分发等。

ForEach 循环不会动态添加条目

我正在为我的应用程序创建一个带有选择选项的过滤器。我遇到的问题是运行嵌套 for 循环时不会填充选择选项。当我指定某个索引时，...

reactjs for-loop nested components jsx

回答 1 投票 0

Blazor 组件继承，没有任何渲染

我想做简单的组件继承，但是当我导航到 /testpage 时我没有看到任何东西我做错了什么？测试基地： @继承组件库 @if (!string.IsNullOrEmpty(名称)) { &l...

c# asp.net-core razor blazor components

回答 1 投票 0

最新nextJS版本14.1.3中如何通过onClick方法使用按钮

“使用客户端” 从“react”导入 React, { useState }; 从“react-icons/fa”导入 { FaChevronLeft, FaChevronRight }；导出默认函数 HeroSlider() { 常量我...

javascript reactjs next.js components

回答 1 投票 0

在组件中使用顺风图像不会居中

我正在尝试将我的文本与我创建的网格的图像对齐，但由于某种原因它无法对齐。技能.jsx ... 我正在尝试将我的文本与我创建的网格的图像对齐，但由于某种原因它无法对齐。技能.jsx <div className='grid grid-cols-3 gap-0 mt-10 m-auto '> {images.map((image) => ( <div key={image.id} className='h-full w-full'> <img src={image.img} alt={image.name} className='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' /> <h2 className='text-center'>{image.name}</h2> </div> ))} </div> 我正在努力为我的技能列表打造一个漂亮美观的外观。老实说，如果有人有更好的建议来完成这个组件，我也会接受。有一段时间一直坚持想出一些好东西。您好，您可以使用它垂直对齐它 <div class='grid grid-cols-3 gap-0 mt-10 m-auto'> <div class='h-full w-full flex flex-col items-center justify-center'> <img src="https://cdn.icon-icons.com/icons2/601/PNG/256/html_5_icon-icons.com_55763.png" alt="HTML icon" class='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' /> <h2 class='text-center'>HTML</h2> </div> <div class='h-full w-full flex flex-col items-center justify-center'> <img src="https://cdn.icon-icons.com/icons2/601/PNG/256/html_5_icon-icons.com_55763.png" alt="HTML icon" class='w-4/12 h-4/12 my-5 border-4 border-black justify-center items-center' /> <h2 class='text-center'>HTML</h2> </div>

reactjs image grid components tailwind-css

回答 1 投票 0

使用 tailwind 在 React 中通过图像进行映射时遇到问题

我目前正在尝试映射图像数组，但每当我调用该组件时，我都会得到除我尝试使用的图像之外的所有内容。 Skills.jsx 组件从“反应”导入反应小鬼...

reactjs components mapping tailwind-css image-size

回答 1 投票 0

有更好的方法来编写这个 Jira 查询吗？

这段代码有什么问题： linkedIssuesOf("type = Epic", "is epic of") 中的 issuesFunction AND 组件不为空且“Epic Link”不为空且 issuesFunction 在

filter components jira epic

回答 1 投票 0

角度信号：当输入信号更改值时触发获取的正确方法是什么？

所以我一直在学习和使用 Angular 中的信号，这很令人兴奋。然而，在某些用例中我觉得存在一些摩擦。当你有一个组件时，我无法找出一个好的模式......

angular typescript components angular-signals

回答 1 投票 0

React TypeScript：在应用程序中切换选项卡时防止组件重新启动

我正在开发一个 React TypeScript 应用程序，我在其中实现了选项卡式内容，类似于浏览器。每个选项卡都包含一个组件，我遇到过切换选项卡导致

reactjs typescript components state

回答 1 投票 0

在 ReactJS 中显示用户个人资料之前，导航栏中显示注册和登录按钮闪烁/闪烁

我有一个导航栏组件，将显示登录和注册按钮，但如果用户登录，它将显示用户名。从API获取用户数据，必须有accessToken才能获取用户数据...

javascript reactjs components navbar

回答 1 投票 0

React 组件的 defaultValue 不起作用

我正在尝试使用从数据库获取的值作为输入字段的默认值（在单击组件之前显示）。但是，使用“defaultValue”属性，获取的值不是

reactjs input components fetch default-value

回答 2 投票 0

React 组件 - 表单中的输入字段未正确使用 UseState

从'react'导入{useEffect}；从'./AddRecordButton'导入AddRecordButton；常量 AddRecordForm=()=>{ const [内容，setContent]=useState([]); const [艺术家名称，设置艺术家名称] = 使用...

javascript reactjs react-hooks components

回答 1 投票 0

在 nextjs 13 中使用带有 app 目录的组件库

在 nextJS 13 中使用 app 目录时，所有客户端组件都必须具有“use client”指令。但流行的 React 库中的大多数组件都没有此指令。 ...

reactjs next.js components next.js13

回答 2 投票 0

Astro 组件中的不良行为

我有一个 Astro 静态网页。其中一个组成部分是：我有一个 Astro 静态网页。其中一个组成部分是： <nav class="p-5 shadow md:flex md:items-center md:justify-between fixed w-full top-0" > <div class="flex justify-between items-center"> <a href="/" class="text-2xl cursor-pointer"> <img class="h-10 inline" src="/img/logo.png" alt="Logo Image" /> Bookingfy</a > <span class="text-3xl cursor-pointer mx-2 md:hidden block" ><ion-icon name="menu"></ion-icon></span > </div> <ul class="md:flex md:items-center md:z-auto md:static absolute w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500" > <li class="mx-4 my-6 md:my-0"> <a href="/generals" class="text-xl hover:text-orange-300 duration-500" >Características</a > </li> <li class="mx-4 my-6 md:my-0"> <a href="/pricing" class="text-xl hover:text-orange-300 duration-500">Precios</a > </li> <li class="mx-4 my-6 md:my-0"> <a href="/about" class="text-xl hover:text-orange-300 duration-500" >Sobre Nosotros</a > </li> <li class="mx-4 my-6 md:my-0"> <a href="/contact" class="text-xl hover:text-orange-300 duration-500">Contacto</a > </li> </ul> </nav> <style> nav { background-color: #13151a; z-index: 999; } ul { background-color: #13151a; } </style> <script> document.addEventListener("DOMContentLoaded", function () { let icon = document.querySelector("ion-icon")!; icon.addEventListener("click", function () { if (icon.getAttribute("name") === "menu") { icon.setAttribute("name", "close"); document.querySelector("ul")!.classList.add("top-[80px]"); document.querySelector("ul")!.classList.add("opacity-100"); document.querySelector("ul")!.classList.add("z-10"); } else { icon.setAttribute("name", "menu"); document.querySelector("ul")!.classList.remove("top-[80px]"); document.querySelector("ul")!.classList.remove("opacity-100"); } }); }); </script> 这个组件位于名为 Layout.astro 的布局内部： --- import Footer from "../components/Footer.astro"; import Header from "../components/Header.astro"; import "../styles/Layout.scss"; import { ViewTransitions } from "astro:transitions"; interface Props { title: string; } const { title } = Astro.props; --- <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="description" content="Astro description" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/img/logo.png" /> <meta name="generator" content={Astro.generator} /> <title>{"Bookingfy | "+title}</title> <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js" ></script> <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js" ></script> <ViewTransitions /> </head> <body> <Header /> <main> <slot /> </main> <Footer /> </body> </html> 问题在于当我们处于小屏幕时导航栏的行为。当以前我不导航其他应用程序页面时，导航栏可以工作。然而，例如，当我输入一个导航栏选项（例如“Características”）并尝试重新打开导航栏时，这不起作用。导航栏不显示选项。我不明白这种行为。您可以将代码复制到一个 Astro 项目中并执行该代码以便更好地理解。有人可以给我一些帮助吗？预先感谢您。基本上，Astro 会在 Header 组件中编译你的 JS 代码一旦你移动到另一个页面，它就会失去它的位置因此将指令传递给脚本以确保它是：全局将使您的代码全局可用，这将解决问题这是一个有点肮脏的解决方案，但是是的，你可以做其他事情，比如将此脚本附加到主布局，我们的但所有脚本都在一个文件中，但它在标题中 <script is:global> document.addEventListener("DOMContentLoaded", function () { let icon = document.querySelector("ion-icon")!; icon.addEventListener("click", function () { if (icon.getAttribute("name") === "menu") { icon.setAttribute("name", "close"); document.querySelector("ul")!.classList.add("top-[80px]"); document.querySelector("ul")!.classList.add("opacity-100"); document.querySelector("ul")!.classList.add("z-10"); } else { icon.setAttribute("name", "menu"); document.querySelector("ul")!.classList.remove("top-[80px]"); document.querySelector("ul")!.classList.remove("opacity-100"); } }); }); </script>

html components navbar astrojs

回答 1 投票 0

React Native：构建进度条组件

您将如何使用组件来通知用户他们正在进行哪一步？我有这样的设置：从“反应”导入反应；从“react-native”导入{视图、文本、样式表}；从 '

react-native components

回答 3 投票 0

React 组件未重新渲染

我有一个反应代码，我面临着与反应中嵌套组件相关的问题。代码问题是我有一个名为testing的父组件，其中包含两个子组件

javascript reactjs dom components react-props

回答 1 投票 0

最佳实践：Angular 14 中的独立组件与模块 [已关闭]

我正在寻求关于 Angular 14 中使用独立组件和模块的最佳实践的澄清。鉴于独立组件作为 Angular 中的一个新概念的引入，...