reactjs 相关问题

使用react-router进行状态管理

我有一个基本的反应应用程序，例如 应用程序.js - const [模式，setMode] = useState("Light"); const setMode = () => { /* .... */ } 常量handleFire = () => { /* ...

在CSS中制作一个带有渐变颜色到底部的弧形切口

我按照链接中的代码操作 https://dev.to/karimshalapy/how-to-make-a-curved-cutout-to-any-element-a2j 并获得完美的弧形切口。但我无法将其背景颜色更改为 bo...

无法从自定义CSS属性设置边框样式

我有一个简单的反应应用程序 （Vite项目） 应用程序.tsx 导入“./common-styles.css”； 导出默认函数 App() { 返回 （ 我有一个简单的反应应用程序 （Vite项目） app.tsx import "./common-styles.css"; export default function App() { return ( <div className="app"> <div className="interactive"> content content </div> </div> ) } 只有 1 个 css 文件 常见样式.css @property --interactive-color { syntax: "<color>"; inherits: true; initial-value: green; } @property --interactive-text-color { syntax: "<color>"; inherits: true; initial-value: white; } @property --interactive-border-top-style { syntax: "<string>"; inherits: true; initial-value: dotted; } @property --interactive-border-top-width { syntax: "<length>"; inherits: true; initial-value: 5px; } @property --interactive-border-top-color { syntax: "<color>"; inherits: true; initial-value: red; } .interactive { background-color: var(--interactive-color); color: var(--interactive-text-color); border-top-style: var(--interactive-border-top-style); border-top-width: var(--interactive-border-top-width); border-top-color: var(--interactive-border-top-color); padding-top: var(--interactive-padding-top, 1vw); padding-bottom: var(--interactive-padding-bottom, 1vw); padding-right: var(--interactive-padding-right, 3vw); padding-left: var(--interactive-padding-left, 3vw); border-top-right-radius: var(--interactive-border-top-right-radius, 5px); border-top-left-radius: var(--interactive-border-top-left-radius, 5px); border-bottom-right-radius: var(--interactive-border-bottom-right-radius, 5px); border-bottom-left-radius: var(--interactive-border-bottom-left-radius, 5px); } （移除底部、右侧和左侧道具以缩短问题，但它们的行为相同） 由于我没有覆盖任何属性，因此我希望组件具有所有属性的指定初始值。 确实如此，但边框样式除外，其行为就像具有未指定的值一样。 我知道通过手动指定样式可以正确设置边框宽度和颜色 border-top-style: solid; 颜色道具也设置正确。 这只是自定义道具中不起作用的样式。 我已经尝试过： syntax: "<String>"; syntax: "<string>"; initial-value: "dotted"; initial-value: dotted; syntax: "'none' | 'solid' | 'dotted' | 'dashed'"; 在 prop 引用上指定后备值： border-top-style: var(--interactive-border-top-style, dashed); 使其采用后备值。 您必须像下面一样定义值，而不使用引号。 @property --border-top-style { syntax: "dotted|dashed|solid"; inherits: true; initial-value: solid; } @property --border-top-width { syntax: "<length>"; inherits: true; initial-value: 5px; } @property --border-top-color { syntax: "<color>"; inherits: true; initial-value: red; } body { border: var(--border-top-width) var(--border-top-style) var(--border-top-color); } some content

react-query useMutation 不会更新 UI 上的新更改

我有一个 React 18 应用程序。我正在使用 @tanstack/react-query 版本 5 进行状态管理。 首先，当我点击“喜欢”按钮时，我的用户界面不会改变。典型的行为应该是……的数量

灰度滤镜过渡在顺风中不起作用

我有卡片图像，我正在尝试制作它，以便当我将鼠标悬停在图像上时，它会从黑白变为彩色。 我已经尝试了很多方法，但我似乎无法让它发挥作用，我不知道是什么......

谁能详细解释一下Vite renderBuiltUrl吗？

我正在使用 React Web 应用程序，使用 vite 作为构建工具 构建我的应用程序后，在构建文件夹中生成所有资产（js、css、svg、png、jpg） 在 vite 配置中我定义了基础：https://x.y.com 在...

在 Framer Motion 标签、动画或初始道具中应用类

如何使用 Framer Motion 标签，并在动画和初始道具中应用类。 就像这样。 如何使用 Framer Motion 标签，并在 animate 和 initial 属性中，应用一个类。 就像这样。 <motion.div initial={{ className: 'hidden' }} animate={{ className: 'visible' }} > <div>yo</div> </motion.div> 我必须使用类，就像我使用tailwindcss一样。 我期望并希望有一种方法可以做到这一点，就像我上面展示的示例一样，只需将其放入渲染的 HTML 标签中style="class-name:{class_name}"，它绝对不会执行任何操作。 提前致谢。 如果您愿意使用纯 CSS 而不是 tailwind，有一个解决方法。 如果将 motion.div 放置在您知道的类的另一个 div 中，则可以使用 > 选择器更改 motion.div 的 CSS 属性 示例： .class > div { cursor:pointer; } 您可以将 vanilla js 与事件一起使用 onAnimationStart() 和 onAnimationComplate() 然后做你的逻辑。参考资料https://www.framer.com/docs/component/###onanimationstart 如果您只想控制可见性，您可以使用 css 属性，例如 <motion.div initial={{ display: "none" }} animate={{ display: "block" }} > <div>yo</div> </motion.div> 但是，您可以使用回调函数和 javascript 选择器做更多事情，如 @Arfan 提到的： function onStart() { document.getElementById("target")?.classList.add("visible"); document.getElementById("target")?.classList.remove("hidden"); } function onEnd() { document.getElementById("target")?.classList.remove("visible"); document.getElementById("target")?.classList.add("hidden"); } ... <motion.div initial="rest" animate="anim" onAnimationStart={onStart} onAnimationComplate={onEnd} id="target" > <div>yo</div> </motion.div>

如何使用 React 修复 ASP .NET C# 中的 CORS 策略

我尝试使用 Postman 添加新成员，结果成功了。但我的网站却没有，当我尝试在我的网站上提交新用户时，出现以下控制台错误： 访问 XMLHttpRequest ...

如何使用 React Router v6 将状态从父路由传递到子路由？

我正在尝试构建一个带有选项卡的页面。我希望每个选项卡都有自己的路线。 /项目/：id/a /项目/：id/b /项目/：id/c 我在 组件中创建路由器。 应用程序.tsx 导入 {

如何将 React Signals 与数组一起使用？

我正在尝试使用信号（@preact/signals-react）来减少大型数据对象的重新渲染。就我而言，我从网络请求中获取对象，并且往往会随着实时更新而频繁更改......

React Native CLI 失败：构建失败并出现异常。 * 出了什么问题：

FAILURE：构建失败并出现异常。 出了什么问题： 无法确定任务“:app:compileDebugJavaWithJavac”的依赖关系。 无法解析配置 ':app:

如何运行反应代码来渲染网页并显示给用户？

假设我有一些生成的反应代码，我想将其显示给用户以供他们点击并发表评论。用户不是对网站进行编码的人，我只是想向他们展示如何生成

Tailwind 类作为 prop 传递时有效，但直接应用时无效

我有这个组件： 导出常量文本输入 = ({ 标签， 包装类名称 = "", 输入类名 = "", 标签类名 = "", 占位符=“”， ...p...

将 useState setter 函数作为回调传递时出现错误

我遇到的问题是，当我传递 setter 函数作为参数时，出现 Uncaught TypeError: param2 is not a function 。 我正在构建一个反应计算器应用程序。我创建了一个单独的文件...

MUI 5/6 边框半径在默认设置和与 theme.shape.borderRadius 一起使用时是不同的

我在我的网站上使用 Mui，在构建主题时，我将边框半径设置为 { 调色板：...， 阴影：...， 排版：...， 形状： { 边框半径：3， }, } 不...

React JS 中未选择下拉菜单

我正在尝试创建一个注册表单，如果用户在“选择角色”中选择“教师”或“学生”，则该注册表单将注册用户。问题是，如果我删除 我正在尝试创建一个注册表单，如果用户在选择角色中选择“教师”或“学生”，则该注册表单将注册用户。问题是，如果我删除该用户的<select>标签代码，用户在 Strapi CMS 管理仪表板上注册，当我添加代码的 <select> 部分时，我没有得到任何响应，谢谢。 这是代码 import axios from 'axios'; import React, { useState } from 'react'; import { FormGroup, Input, Label, Button, Row, Col } from 'reactstrap'; import { Link, Navigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom'; import { toast } from 'react-toastify'; import Select from 'react-dropdown-select'; const initialUser = { username: '', email: '', password: '', }; const Registration = () => { const [user, setUser] = useState(initialUser); const navigate = useNavigate(); const signUp = async () => { const url = 'http://localhost:1337/api/auth/local/register'; try { if ( user.username && user.email && user.password && (user.student || user.teacher) ) { const res = await axios.post(url, user); if (res) { setUser(initialUser); navigate('/login'); } } } catch (error) { toast.error(error.message, { hideProgressBar: true, }); } }; const handleUserChange = ({ target }) => { // Allow typing in the input boxes const { name, value } = target; setUser(currentUser => ({ ...currentUser, [name]: value, })); }; return ( <Row className="register"> <Col sm="12" md={{ size: 4, offset: 4 }}> <div className="signup-form"> <h2>Sign Up</h2> <FormGroup> <Label for="username" className="required-field"> User Name </Label> <Input type="text" id="username" name="username" value={user.username} onChange={handleUserChange} placeholder="Enter your full name" /> </FormGroup> <FormGroup> <Label className="required-field">Email</Label> <Input type="email" id="email" name="email" value={user.email} onChange={handleUserChange} placeholder="Enter Email" /> </FormGroup> <FormGroup> <Label className="required-field">Password</Label> <Input type="password" id="password" name="password" value={user.password} onChange={handleUserChange} placeholder="Enter Password" /> </FormGroup> <FormGroup> <label> <span className="required-field">Role:</span> <select> <option>Choose Role</option> <option name="student" value={user.student}> Student </option> <option name="teacher" value={user.teacher}> Teacher </option> </select> </label> </FormGroup> <Button color="primary" onClick={signUp}> Sign Up </Button> <h6> Already have an account? Click <Link to="/login">Here</Link> to login </h6> </div> </Col> </Row> ); }; export default Registration; ` const Registration = () => { const [user, setUser] = useState(initialUser); const navigate = useNavigate(); const signUp = async () => { const url = 'http://localhost:1337/api/auth/local/register'; try { if ( user.username && user.email && user.password && (user.student || user.teacher) ) { const res = await axios.post(url, user); if (res) { setUser(initialUser); navigate('/login'); } } } catch (error) { toast.error(error.message, { hideProgressBar: true, }); } }; 我希望当我选择 user.student 或 user.teacher 时它会记录 包含角色属性来捕获用户的角色。 if (user.username && user.email && user.password && user.role) 使用 onChange 来处理 select 中的角色 <select onChange={handleRoleChange} value={user.role}> <option value="">Choose Role</option> <option value="student">Student</option> <option value="teacher">Teacher</option> </select> 手柄角色变更功能示例： const handleRoleChange = (event) => { setUser((currentUser) => ({ ...currentUser, role: event.target.value, })); }; 希望这有帮助！...

如何使用 Strapi 返回 404 HTTPS 状态代码

我有一个网站，在前端使用 React，在后端使用 Strapi。 为了处理 404 页面，我只需在 App.tsx 中添加以下代码： ... 我有一个网站，在前端使用 React，在后端使用 Strapi。 为了处理我的 404 页面，我只需在 App.tsx 中添加以下代码： <Routes> ... <Route path="*" element={<Page404 />} /> </Routes> 我的 Page404 组件看起来像这样： import { Helmet } from "react-helmet-async"; const Page404 = () => { return ( <> <Helmet> <title>404 - Page Not Found</title> <meta name="robots" content="noindex" /> <meta name="description" content="Page not found." /> <link rel="canonical" href={window.location.href} /> <script>{`document.status = 404`}</script> </Helmet> {My content here} </> ); }; export default Page404; 如果用户尝试访问不存在的页面，我的 404 页面会按预期显示。但我不确定 SEO 爬虫是否理解该页面不存在。 如您所见，我添加了一个小脚本来更改文档的状态，但我不知道如何处理网络 DevTools 中出现的“http 404 代码”。在 PHP 中，我只需添加以下代码： <?php http_response_code(404); ?> 目前，我在 Google 搜索控制台上看到页面，即使它们不存在于我的“sitemap.xml”文件中。 有人知道我添加的脚本是否足够 SEO 爬虫吗？如果没有，有没有办法从 Strapi 发回 404 错误代码？ 谢谢。 要在 Strapi 中返回 404 HTTPS 状态代码，您通常需要创建一个自定义控制器或修改现有控制器来处理找不到资源的情况。这是实现这一目标的分步指南： 第 1 步：创建或修改控制器 导航到您的 Strapi 项目：转到您的 Strapi 项目的目录。 创建或编辑控制器: 如果您要修改现有控制器（例如，针对内容类型），请导航至 ./src/api/[your-content-type]/controllers/[your-controller].js。 如果您要创建新控制器，请在同一目录中创建一个文件。 返回 404 状态代码：在控制器操作中，您可以使用 ctx 对象发送 404 响应。以下是如何执行此操作的示例： // Example: custom-controller.js module.exports = { async findOne(ctx) { const { id } = ctx.params; // Assume you have a service to find your resource const entity = await strapi.services['your-content-type'].findOne({ id }); if (!entity) { return ctx.notFound('Resource not found'); // This will send a 404 status } return entity; }, }; 第 2 步：定义路线 如果您要创建新路线或修改现有路线，请确保您的 routes.json 文件包含正确的路径： { "routes": [ { "method": "GET", "path": "/your-content-type/:id", "handler": "custom-controller.findOne", "config": { "policies": [] } } ] } 第 3 步：测试您的 API 启动您的 Strapi 服务器：确保您的 Strapi 服务器正在运行。 测试端点：使用Postman或CURL等工具来测试端点。尝试访问不存在的资源（例如，不存在的 ID）。 您应该收到包含 404 状态代码和消息“资源未找到”的响应。 其他注意事项 错误处理中间件：您可能还需要考虑实现全局错误处理中间件以一致地管理不同类型的错误和响应。 自定义错误消息：您可以自定义 404 状态返回的消息，以在需要时提供更多上下文。 此方法使您可以控制响应，并帮助管理在找不到资源时 API 与客户端的通信方式。 如果您需要任何类型的 SEO 帮助，您可以访问此[技术 SEO][1]：https://www. Fiverr.com/s/o8xWeB4

Astro+ React 应用程序构建错误：(1:0) 使用 sourcemap 报告错误时出错：无法解析错误的原始位置

我正在尝试通过运行命令来构建应用程序 npm 运行构建 但出现以下错误 (1:0) 使用sourcemap报错时出错：无法解析错误的原始位置....

Laravel Inertia.js React SSR Vite Nginx Gzip 配置

今天我正在努力优化我的网页以正确使用 Inertia SSR 和 Gzip 从如何更改 Vite 配置到 Nginx 配置应该如何。 现在我喜欢在这里分享配置...

将我的应用程序切换到新数据库后，即使我的代码没有更改，我也会收到 CORS 请求错误。为什么会出现这种情况？

我有一个小应用程序完美运行了近两年。它包括： 托管在 Fly.io 上的 Postgres 数据库 用Go编写的API服务器，也托管在fly.io上 使用react的前端客户端...