jsx 相关问题

为什么在将react-image-magnify与swiper/react模块集成时，图像缩放容器不显示？

我正在尝试将react-image-magnify集成到我的电子商务存储库中，该存储库使用swiper/react作为轮播。集成有效，但我将鼠标悬停在

如何修改/更改Astro中frontmatter中加载的数据？

我正在使用 Astro 构建一个基本应用程序，在其中使用 frontmatter 中的导入语法从文件加载 JSON 数组。现在我想在每次点击时将数据分成两半，具体取决于...的哪一侧

使用以前的自定义 React Hook 实现

从“react”导入{useRef，useState}； 导入“./styles.css”； 函数 usePrevious(值) { const currRef = useRef(); const previousValue = currRef.current; currRef.cu...

反应状态表现出奇怪的行为

我刚开始反应并为咖啡店制作一个简单的购物车。每当我将商品添加到购物车时，如果该商品尚未在购物车中，那么我基本上将其与其余商品一起添加并设置

动画后无法应用悬停效果 - React

首先大家晚上好。我正在为 MMO 服务创建一个在线商店，我的想法是： 卡片图像 这些卡片从左到右进入动画，出现在...

为什么 TypeScript 在使用元组类型时不强制 JSX 子级的顺序？

我正在尝试使用 TypeScript 元组类型强制传递给 React 组件的子级的顺序。这是一个简化的示例： 类型 MyComponentProps = { 孩子们？： | [标题] | [标题，

React 中的 Typography 组件到底是什么？

我正在使用Material-UI组件库，并看到经常使用的组件。我已阅读文档，这是定义： 使用排版来展示您的设计和

如何使用 Javascript 创建博览会应用程序？

我正在尝试使用 JavaScript 创建一个 expo 项目，但是，当我在终端中编写 npx create-expo-app@latest 时，它会使用 TypeScript 为我创建一个项目。 但是，我希望它创建一个项目...

防止 vscode prettier 包装其中包含模板文字的 jsx 属性

我发现 prettier 会将我的 jsx 属性包装为新行，该属性具有多个模板文字。 例如我的 jsx 文件中的示例： // 在格式化和预期结果之前 我发现 prettier 会将我的 jsx 属性包装为新行，该属性具有多个模板文字。 以我的 jsx 文件中的示例为例： // before formatted and expected result <DemoFrame html={`${demoPath}/frame1/index.html`} css={`${demoPath}/frame1/index.min.css`} /> // formatted <DemoFrame html={`${demoPath}/frame1/index.html`} css={` ${demoPath}/frame1/index.min.css `} /> 但是这些都没有改变 <CodeChunk path={`${demoPath}/frame1/index.html`} lang="html" /> <DemoFrame html={`${demoPath}/frame1/index.html`} css={`/frame1/index.min.css`} /> <DemoFrame html={`${demoPath}/frame1/index.html`} css={demoPath + `/frame1/index.min.css`} /> 我曾尝试将这两行添加到 settings.json 但不起作用。 "prettier.printWidth": 2000, "prettier.singleAttributePerLine": false, 在您的示例中，对于未格式化的示例，请尝试交换 html 和 css 值中模板文字的使用，例如： // Your example (doesn't get formatted) <DemoFrame html={`${demoPath}/frame1/index.html`} css={`/frame1/index.min.css`} /> // Swapped usage of template literals (before formatting) <DemoFrame html={`/frame1/index.min.css`} css={`${demoPath}/frame1/index.html`} /> // Swapped usage of template literals (after formatting, breaks inside css value) <DemoFrame html={`/frame1/index.html`} css={` ${demoPath}/frame1/index.min.css `} /> // Renamed css attribute to cssHref (doesn't get formatted) <DemoFrame html={`/frame1/index.html`} cssHref={`${demoPath}/frame1/index.min.css`} /> 如果将属性从 css 重命名为任何其他名称（例如 cssHref），它不会分成多行（无论有多少属性值使用模板文字）。我不知道为什么这种行为会变得更漂亮，但希望这能有所帮助。

在Oak中使用JSX作为视图引擎

我正在尝试使用 Deno 和 Oak 创建一个简单的 html 页面。 作为视图引擎，我喜欢使用 JSX 来生成实际的 html。 这是一个简单的例子，但是失败了，因为 JSX 被转换为 React。

道具没有发挥作用

这是我的反应组件 const ButtonComponent = ({ 儿童, onClick, 禁用, className = "" }) => { console.log("类名是", className); const 按钮ClassNam...

如何将标签之间的值传递给子组件？反应 jsx

我有这样的jsx， 从“@mui/material/TableCell”导入 TableCell； 从 '@mui/material/TableRow' 导入 TableCell； 我有这样的jsx， import TableCell from '@mui/material/TableCell'; import TableCell from '@mui/material/TableRow'; <TableRow> <TableCell sx={{minWidth:45,width:45,maxWidth:45,backgroundColor:"white"}}></TableCell> </TableRow> <TableRow>来自材料ui 现在我想像这样增强TableRow， const EnhancedTableRow= forwardRef((props,ref) => { const myDivRef = useRef(); useImperativeHandle(ref,()=>({ setReload: () =>{ setReload(!reload); }, getBoundingClientRect: ()=>{ return myDivRef.current.getBoundingClientRect(); }, isInDiv:(x,y) =>{ var pos = myDivRef.current.getBoundingClientRect(); if (x >= pos.x && y >= pos.y && x <= pos.x + pos.width && y <= pos.y + pos.height){ return true; } return false; } })); return (<div ref={myDivRef}> <TableRow sx={props.sx}> ???? </TableRow> </div>) }); 所以，当我使用 EnhancedTableRow 而不是 TableRow 时 如何继承标签之间的值，例如<TableCell sx={{minWidth:45,width:45,maxWidth:45,backgroundColor:"white"}}></TableCell> 到 EnhancedTableRow 组件？ 我想把这个值放在 ???? 中 EnhancedTableRow 转发所有道具。 <TableRow {...props} />

如何在不调整背景大小的情况下调整 SVG 大小

我想使用 SVG 作为我网站的徽标。 我尝试通过修改其宽度和高度来调整它的大小，但它不起作用，因为它调整了整个图像的大小。 我也尝试过这些解决方案： 调整 SVG 大小...

如何调整 SVG 大小、调整其宽度和高度以及调整背景大小，我只想显示文本

我想使用 SVG 作为我网站的徽标 我尝试通过修改其宽度和高度来调整它的大小，但它不起作用，因为它调整了整个图像的大小。 我也尝试过这些解决方案在 HTML 中调整 SVG 大小？...

如何更改React.js中的页面

我正在学习 React.js 并正在创建一个演示。 我创建了一个登录页面。现在我想开发一个功能，如果我使用管理员的凭据，那么我应该更改当前页面的布局...

尝试显示 IMG，并将 src 设置为来自 Mongoose 的二进制/缓冲区图像数据

尝试使用 React/JSX 显示 IMG，并将缓冲/二进制数据保存到我的 MongoDB/Mongoose 数据库。 我使用 IMG 元素迭代数据数组，如下所示： 尝试使用 React/JSX 显示 IMG，并将缓冲/二进制数据保存到我的 MongoDB/Mongoose 数据库。 我使用如下所示的 IMG 元素迭代数据数组： <img src={`data:${item.img.contentType};base64,${item.img.data.data.toString("base64")}`} alt="" /> import React, { useState, useEffect } from "react"; import axios from "axios"; const FilesUpload = () => { const [allPics, setAllPics] = useState([]); useEffect(() => { const getPics = async () => { let res = await axios.get("http://localhost:8080/"); setAllPics(res.data); }; // query the server for all of the picture objects getPics(); }, []); const [state, setState] = useState({}); const handleChange = (e) => { e.preventDefault(); setState(e.target.value); console.log(state); }; return ( <> <h1>upload an image</h1> <hr /> <div> <form action="http://localhost:8080/" method="POST" encType="multipart/form-data" > <div> <label>Image Title</label> <input type="text" id="name" placeholder="Name" name="name" onChange={handleChange} value={state.name}/> </div> <div> <label htmlFor="desc">Image Description</label> <textarea id="desc" name="desc" rows="2" placeholder="Description" onChange={handleChange} value={state.desc}/> </div> <div> <label htmlFor="image">Upload Image</label> <input type="file" id="image" name="image" required /> </div> <div> <button type="submit">Submit</button> </div> </form> </div> {allPics.length > 0 ? ( <div> {allPics.map((item, index) => ( <div key={index}> <div> <img src={`data:${item.img.contentType};base64,${item.img.data.data.toString("base64")}`} alt="" /> </div> </div> ))} </div> ) : ( <> <hr /> <br /> <h1>uploaded files</h1> <h5>Loading..</h5> </> )} </> ); }; export default FilesUpload; 但我总是得到 ERR_INVALID_URL: 从网上的类似线程中，我读到我需要采用这些逗号分隔的值并删除逗号，这将为我提供正确的数据。 很难弄清楚这一点。 任何帮助都会很棒。 谢谢 在我的猫鼬模型中保存这样的图像后，我遇到了同样的问题，经过多次研究我解决了这个问题，希望这也适用于你 const base64String = btoa(String.fromCharCode(...new Uint8Array(item.img.data.data))); 并在 img 标签中放入 -: src={`data:image/${item?.img?.contentType};base64,${base64String}`} 您找到了这位伙伴的解决方案吗？

如何将 JSX 渲染（打印）为字符串？

这里 JSX 是代码示例： 导出默认类 Element 扩展 React.Component { 使成为（） { 返回 （ {这个.props。 这里 JSX 是代码示例： export default class Element extends React.Component { render() { return ( <div> <div className="alert alert-success"> {this.props.langs.map((lang, i) => <span key={i} className="label label-default">{lang}</span>)} </div> </div> ) } } 如何获得这样的字符串？ <div><div className="alert alert-success">{this.props.langs.map((lang, i) => <span key={i} className="label label-default">{lang}</span>)}</div></div> UPD： 我得到了在服务器上渲染的 React 组件。我想将它们作为字符串来将它们转换为客户端的另一个模板库。 只需调用 renderToStaticMarkup()，你就可以得到 React 生成的静态 html 标记语言。 有点像这样： import ReactDOMServer from 'react-dom/server'; import Element from './path/to/element/class'; const element = <Element />; ReactDOMServer.renderToStaticMarkup(element) 这里有更多关于此的文档： https://react.dev/reference/react-dom/server/renderToStaticMarkup

npm run build 中显示打字稿错误

我是下一个js的新手。我的问题是，当我运行 npm run build 时，它显示打字稿错误，即使我没有在我的项目中使用它。我正在实施国际化并且...

如何在 React 中更改组件外部的状态？

我想创建一个 Ball 组件，每次我在名为 InsertionSortView 的不同视图中调用交换函数时，其位置（由其 CSS 呈现）都会更新。我怎么做？ 这是我的...

在 TypeScript 的函数组件内定义的 React 的 useState 钩子仍然给出错误 - 无效的钩子调用

我正在构建一个自定义反应组件库。当我开始使用 useState 挂钩来实现悬停功能时。我开始在应用程序生成的浏览器控制台中收到以下错误...