jsx 相关问题

输入字段在我输入时失去焦点

我正在构建一个 React 应用程序，它使用输入字段允许用户输入菜谱标题，然后，当他们提交表单时，菜谱应添加到 RecipeList 中。 目前，我的代码...

如何将html元素转换为JSX？

我基本上有两个问题。 1.)我有这个基本的reactjs组件。如何将其转换为 JSX？ 我的意思是我希望这段代码看起来像reactjs 风格的代码。 2.) 如果我收到来自 bac 的数组...

我无法在单元格表中动态插入 React 图标

我尝试在单元格（表格）中插入 React 图标，但收到消息 无法在“Node”上执行“appendChild”：参数 1 不是“Node”类型 我的代码很简单： const iconCell = 行。

在 React 中按条件渲染组件的最佳方式是什么？

我有一个需要按条件渲染的组件，我对下面的代码的两种方式感到困惑，我正在找出 React 的推荐方式。设置渲染的最佳方法是什么

初学者天气 API 问题

谁能告诉我这段代码哪里出了问题？它触发一次，并始终显示相同的城镇名称。 常量天气 = () => { const [zipCode, setZipCode] = useState("");

我可以在另一个条件中使用条件渲染吗？

所以这就是我正在尝试做的.. 如果没有未读消息，则显示“你都忙完了！” 如果恰好有 1 条未读消息，则应显示“您有 1 条未读消息...

shadcn 图表标签和值之间没有空格

我面临的问题可以在图像上看到，本质上一些更大的值在值和标签之间没有任何填充，我想知道如何使其至少 2px 图像： 部分代码...

渲染不同组件时无法更新组件）

我正在使用 React 18、React Router 6 和 React Auth Kit 2.7 我尝试做登录页面，如 RAK 链接示例所示 但我收到这个错误 登录组件 JSX 的代码 从“r...

我想保持验证简单，并且仍然对函数中的每个输入使用不同的条件

我在react中进行了一些表单验证，我可以在一个函数中使用我的状态中的一些全局变量来进行表单验证吗？有什么方法可以保持简单并仍然给出不同的条件......

如何读取DDRAGON LOL API中的图像

我正在使用这个API：https://ddragon.leagueoflegends.com/cdn/12.4.1/data/en_US/champion.json 我可以很好地读取所有参数（名称、ID 等），但是当我想显示冠军的图像时，它......

useState 问题

我有以下React组件，它的工作方式非常奇怪！ useEffect 挂钩内的所有内容都是正确的（console.log 显示实例的正确值），但是在使用 ne 调用 setApiInstance 之后...

用 axios 实例反应 useState 问题

我有以下React组件，它的工作方式非常奇怪！ useEffect 挂钩内的所有内容都是正确的（console.log 显示实例的正确值），但是在使用 ne 调用 setApiInstance 之后...

我可以根据现有故事制作一个包含物体道具的新故事吗？

我一直在摆弄故事书，发现了这个新的很酷的功能，可以在摆弄当前的故事时添加新故事：交互式故事生成 我尝试...

如何在 JavaScript 文件（.js 扩展名）中禁止 JSX 语法

我想确保 VS Code 中的 JavaScript 文件（带有 js 扩展名）仅包含有效的 JavaScript 语法。 是否可以在 VS Code 中禁止 .js 文件使用 JSX 语法？ 理想的合作...

Shadcn UI 侧边栏与 React 集成

我在如何在 React 上集成 Shadcn UI 侧边栏时遇到了麻烦，因为在官方文档中，示例是在 typescript（Next.js？）上的，而我对 Next.js 框架不熟悉...

使用react和mdx设置网站链接预览（网站每个页面一个单独的图像）

我有一个网站，例如“example.com”，主要的layout.jsx具有以下元数据。 导出常量元数据 = { 标题： { 模板：'%s - 示例', 默认值：'示例 -

在react中渲染jsx组件列表

我有一个列表，其中包含一些jsx组件，例如组件： 成分= [ console.log("测试")}>..., 我有一个列表，其中包含一些 jsx 组件，例如 components: components = [ <span className="c1 c2" onClick={() => console.log("test")}>...</span>, <span className="c1 c2" onClick={() => console.log("test")}>...</span>, <span className="c1 c2" onClick={() => console.log("test")}>...</span>, ] 顺便说一句，组件，是通过 push 放入数组中制成的： for(...) { components.push(<span ...>...</span>) } 我使用这个列表如下： const MyList = () => { return ( <p>{components}</p> ) } 问题是，渲染后，项目没有任何 onClick （或 onclick 事件处理程序）函数。 尽管它们具有 class 属性，并且 event 设置为 function noop() {}。 浏览器检查器显示它们如下： // there is no 'onclick' function <span class="c1 c2">...</span> ... 我感谢任何帮助。 像 onClick 这样的事件处理程序仅在 React 渲染过程中创建和渲染元素时才起作用（如类组件中的“渲染”）。如果您在组件生命周期之外的数组中创建并存储 JSX 元素（如您的示例中所示），React 将无法正确地将事件处理程序附加到这些元素。 你应该这样做 const MyList = () => { // Define different functions const handleClick1 = () => console.log("Clicked item 1"); const handleClick2 = () => console.log("Clicked item 2"); const handleClick3 = () => console.log("Clicked item 3"); // Array of data and corresponding event handlers const items = [ { text: "Item 1", onClick: handleClick1 }, { text: "Item 2", onClick: handleClick2 }, { text: "Item 3", onClick: handleClick3 }, ]; return ( <div> {items.map((item, index) => ( <span key={index} className="c1 c2" onClick={item.onClick} // Assign specific onClick handler > {item.text} </span> ))} </div> ); }; export default MyList;

HTML 元素标签的 TypeScript 类型

我正在开发一个 TypeScript + React 项目。对于组件，我想使用多态作为道具。但是，我想将其限制为 HTML 标签，因此它不会接受 ReactNodes 或 JSX 元素。乙...

Otp 未验证

使用的技术堆栈：Next js jsx、Prisma、Postgre、Zod、Nodemailer、Crypto 问题：当我注册并填写所需数据（姓名、电子邮件、密码）时，会生成一个 otp（一次性密码）并且...

错误：发生 Illustrator 错误：1346458189 ('PARM') (illustrator v2024)

很长一段时间以来，我在几乎最简单的脚本中经常遇到这些错误。尽管我已经尝试了所有替代方案，认为它可能在坐标中，但我还是收到了此警告