reactjs 相关问题

React是一个用于构建用户界面的JavaScript库。它使用声明范式,旨在既高效又灵活。

CSS 背景过滤器忽略过渡持续时间(ReactJS)

我在 React 中有一个组件,它是一个仅有时会弹出的模式。我无法发布所有代码,因为它太多了,但我会简化并发布我能发布的代码。 问题: 模态应该是

回答 1 投票 0

React 应用程序开发的正确方法

我正在尝试学习 React,并希望获得有关如何最好地使用 React 创建应用程序的知情意见。 我了解到可重用性是 React.js 开发的一个重要方面。意思是 abi...

回答 1 投票 0

在 React 中处理滚动动画

React 中处理滚动位置的正确方法是什么?我真的很喜欢平滑滚动,因为它有更好的用户体验。由于在 React 中操作 DOM 是一种反模式,所以我遇到了问题:如何...

回答 10 投票 0

如何知道 useEffect 的触发条件并用它来创建条件?

我有一个 useEffect,它的依赖项数组中有 2 个状态,如下所示: const [currentTab, setCurrentTab] = useState('打开'); const [searchParams, setSearchParams] = useState('');

回答 1 投票 0

我需要有条件地禁用未选中的复选框。反应js

用户从数据集中选择一个选项并调用 api。该 API 返回一个对象,其中嵌套了一个数组,这些值被列为复选框。 api 还带回一个密钥...

回答 1 投票 0

在 React 中使用键盘控制 UI。如何正确做?

我想使用键盘控制我的应用程序 UI,但我不知道如何制作。 (视频播放器应用程序)我有 redux 商店,我将状态设置为控件。然后它通过 props 传递状态。一个...

回答 1 投票 0

Next.js useDebouncedCallback 似乎没有延迟请求

我正在学习 Next.js 教程。目前我被困在这个页面上: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination 经过彻底的网络搜索后没有明确的答案,我会......

回答 1 投票 0

设计社交网络:组件分布

我需要为 Next JS 和 React 课程创建一个简单的社交网络,其中包含用于显示提要帖子的主页、用于导航的导航栏、个人资料和通知...... 显然我知道每个组合...

回答 1 投票 0

如何通过后端动态设置元素的CSS样式? (用户自定义面板可更改其他网页的样式)

假设我们有一个包含多个页面的网站,还有一个用户帐户页面。用户在他的面板中有一个设置可以更改网站其他页面中某些部分的颜色/字体大小/样式等...

回答 1 投票 0

在 vercel 中部署时,本地字体无法在 next.js 中解析

我正在尝试在 next.js 13.3 中使用 next/fonts。本地一切正常,但当我部署到 Vercel 时,我不断收到此构建错误 Module not found: Can't parse './fonts/BrFirma-Thin.wof...

回答 1 投票 0

React 将状态从父函数传递给子类

我是一个 React-Idiot,更熟悉技术堆栈的其他部分,构建一个超级简单的 React 18 应用程序,包含两个组件:Home 是调用函数,ImageDisplay 是一个 React 类。我需要

回答 1 投票 0

iframe 或嵌入网站有什么替代方案吗?

我希望你一切都好。几周来我一直在为我的应用程序开发功能,但我不知道如何解决该问题。 我想做的是:插入任何网站...

回答 1 投票 0

如何在 React 中使用 Tiptap 中的 setContent 加载内容?

他们提供了有关 setContent 和一般命令的详细信息。但是,我一直在按 ctrl+F 到处寻找“命令”应该放在代码中的位置。我只是希望以 HTML 格式加载...

回答 3 投票 0

发送时有效负载为空,当se

我正在尝试将图像传递到我的节点服务器,但无论我尝试什么,当我将其作为 const formData = new FormData(); 传递时,有效负载始终为空,像往常一样,我确实获得了正确的信息(

回答 1 投票 0

React:如何在卡片的地图功能中仅更改一张卡片的 CSS

我对React很陌生,正在尝试创建一个函数,从数组中映射屏幕上的5张卡,但只能更改被单击的卡的CSS。 导出默认功能项目...

回答 1 投票 0

NextJS DashUI 模板入口点在哪里?

我从以下位置克隆了 NextJS 模板:https://github.com/codescandy/dashui-free-nextjs-admin-template 它没有页面目录,那么起点在哪里? 起点在哪里...

回答 1 投票 0

无法为 SVG 组件设置 className 属性

在从 webpack 迁移到 vite 的过程中,我遇到了以下问题。我有以下 React 组件: 从 '@styles/pages/product/other/other.module.scss' 导入 { otherQuote as other__quote } ; ...

回答 1 投票 0

我如何创建一个可以在印度使用的条带订阅。帮助我集成 3D 安全和所有其他需要的东西

实际上,问题是我无法创建解决印度付款问题的订阅,任何人都可以帮忙 当我输入印度的条纹测试卡详细信息时出现错误,这是缺点......

回答 1 投票 0

如何运行start React Error0308010C

我测试创建反应,但我的朗姆酒错误:0308010C $npx create-react-app 我的 $cd 我的 $npm 开始 > [email protected] 开始 > 反应脚本启动 i「wds」:项目运行在http://192.168.56.1/ 我「wds」:

回答 2 投票 0

切换错误,斜向移动而不是直线移动

我正在研究切换,这是我的代码: 从“./Toggle.module.scss”导入样式; 导出默认函数 Toggle() { 返回 ( <> 我正在研究切换,这是我的代码: import style from "./Toggle.module.scss"; export default function Toggle() { return ( <> <input type="checkbox" id="toggle" className={style.toggle} /> <label htmlFor="toggle" className={style.label} /> </> ); } .toggle { height: 0; width: 0; opacity: 0; } .label { width:60px; height: 30px; border-radius:30px; display: block; background-color: #ebebeb; box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2) inset; left:10px; padding-left: 5px; position: relative; &::after { content: ''; position: absolute; width: 23px; height: 23px; border-radius: 50px; background-color: green; top: 50%; transform: translateY(-50%); transition: 0.3s; } } .toggle:checked ~ .label::after{ transform: translateX(32px); } 最初,旋钮完全位于开关内部的中心,但是当我单击它时,它会进行对角线移动,而不是向右直线移动。详情请参阅codesandbox。 https://codesandbox.io/p/sandbox/red-microservice-gq48pj?file=%2Fsrc%2Findex.js 您还需要将 translateY: -50% 添加到切换转换中,如果不这样做,该值将不会添加到转换中: .toggle { height: 0; width: 0; opacity: 0; } .label { width: 60px; height: 30px; border-radius: 30px; display: block; background-color: #ebebeb; box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2) inset; left: 10px; padding-left: 5px; position: relative; &::after { content: ""; position: absolute; width: 23px; height: 23px; border-radius: 50px; background-color: green; top: 50%; transform: translateY(-50%); transition: 0.3s; } } .toggle:checked ~ .label::after { transform: translateX(32px) translateY(-50%); } 一种解决方案是: &::after { ... top: 4px transform: translateX(0); ... } .toggle:checked ~ .label::after { transform: translateX(28px); } 注意从translateY 到translateX,因为你是水平移动,所以根本不需要设置Y 轴。

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.