jsx 相关问题

为什么我的组件没有使用 render prop 渲染？

我的 .js 文件中有以下数据结构： 常量 mylinks = [ { 图标：图标1， 网址：“网址1”， }, { 图标：图标2， 网址：“网址2”， }, { 图标：ico...

如何在模板文字中使用模板文字（``）？

我有一个非常具体的边缘情况，我需要在模板文字中使用模板文字，但无法完成它。 代码看起来像这样： 某事某事 我有一个非常具体的边缘情况，我需要在模板文字中使用模板文字，但无法完成它。 代码看起来像这样： <p>Something something <a href={`${SOMELINK}/blah`}>SomeLink</a></p> 但是，我必须将其包装在一个函数中，同时维护 SOMELINK 变量的值，这会导致错误发生。不管我是否逃脱蜱虫。 someFunction (`<p>Something something <a href={`${SOMELINK}/blah`}>SomeLink</a></p>`) 使用转义刻度时，我收到以下错误消息： 错误：需要 SOMELINK 但没有提供 没有，我得到： 意外的令牌，预期为“，” 我该如何处理？ 编辑：可能应该注意的是，传入 someFunction 的代码将被渲染并且需要使用。最终会通过dangerouslySetInnetHTML传入另一个标签。所以它看起来像这样： <div dangerouslySetInnerHTML={{__html: someFunction(`<p>Something something <a href={`${SOMELINK}/blah`}>SomeLink</a></p>`)}}/> 不确定这是否相关，但someFunction只是对文本做了一些修改。 我认为你把它过于复杂化了。如果您只需要维护 SOMELINK 的值，这应该可行： someFunction(`<p>Something something <a href="${SOMELINK}/blah">SomeLink</a></p>`) 简介 正如 imjared 在他的回答中所说，你肯定让 JavaScript 模板变得复杂了。但我想通过解释模板的语法来使其更清楚。 模板中最多有四个不同的部分，您可以在模板中编写模板，如下所示，但不完全是您提到的方式。 花式弦 首先，模板只不过是一种“奇特的方式”来编写一个字符串，其中定义了表达式。如果您输入： typeof `this template` (1) 在您的浏览器控制台中，它将写入 "string"。在过去，当你想将许多字符串连接在一起时，你最终会写： "string1" + "string2" + ... + "stringN" (2) 一些参数可以是数字，然后会自动转换为字符串（在大多数情况下，它会按预期工作）。但是，如果您想计算一个表达式，您通常必须将该表达式写在括号之间： "string1" + (a + b * c) + "string2" (3) 现代 JavaScript 有模板 模板将其替换为 ${...} 特殊语法。在${...}内，您可以写下您的表情。这意味着（3）可以使用模板语法重写如下：`string1${a + b * c}string2` (4) 该语法还有一个优点，看起来您可以在模板中插入变量，如下所示： `string1${varname}string2` (5) 这仍然是一个表达，只是碰巧仅限于varname。因此，模板中可能有四个不同的部分： 一根弦 如果您的模板只是一个字符串（即没有${...}），那么它就像一个字符串。`this is just like a string` (6) 两部分 如果模板中有一个表达式，那么模板中就有一个 HEAD 和一个 TAIL。上面的 (4) 和 (5) 是带有 HEAD 和 TAIL 的模板。 三部分 如果您编写的模板包含多个表达式，则会在表达式之间添加一个或多个特殊部分。这些称为中间模板。 `head${expr1}middle${expr2}middle${expr3}tail` (7) 模板中的模板 正如我上面提到的，您实际上可以在模板中编写模板。很可能，您不需要这样的，但这是可能的，因为 ${ 和 } 之间出现的是一个表达式，而模板被视为主要文字（或多或少，它比那...)`string1${v + `sub-template${ sub_sub_template_is_possible }tail` + w}string2` (8) 如 (8) 中的子模板示例中所述，您可以在子模板中拥有另一个子子模板。我认为在大多数情况下，您不太可能需要这样的模板，因为根模板已经为您提供了所有必要的功能。 逃脱角色 模板，就像字符串一样，支持使用反斜杠作为引导符来转义各种字符： \<octal> \x<hexadecimal> \u<hexadecimal> 一些特殊字符，例如代表换行符的字符n（\n） 最后，其他字符按原样转义，这包括： \` (9) 转义模板引号，在这种情况下，它们被视为引号字符，而不是模板起点或终点。换句话说，字符串 (10) 等于字符串 (11)： `\`` (10) "`" (11) 非常简化的语法 以下是上面提到的简化的类似 BNF 语法的部分： TemplateLiteral ::= Template | TemplateHead TemplateExpression* TemplateTail TemplateExpression ::= Expression | TemplateExpression TemplateMiddle Expression Template ::= '`' Character* '`' TemplateHead ::= '`' Character* '${' TemplateMiddle ::= '}' Character* '${' TemplateTail ::= '}' Character* '`' Character ::= ... -- characters valid in strings, except '${' and '`' (12) 参考 JavaScript 语言在本页的 ECMA-262 文档中进行了描述： https://www.ecma-international.org/publications-and-standards/standards/ecma-262/ 搜索模板文字词汇组件。您会发现我上面提到的四个部分（以及更多）：Template、TemplateHead、TemplateMiddle和TemplateTail。 你可以这样做： someFunction(`<p>Something something <a href={${SOMELINK}/blah>SomeLink</a></p>`); 试试这个 someFunction("<p>Something something <a href={"+`${SOMELINK}/blah`+"}>SomeLink</a></p>") 我认为你还需要使路线相对 "<p>Something something <a href={/"+`${SOMELINK}/blah`+"}>SomeLink</a></p>" 我认为 SOMELINK 变量在这种情况下不可用。 您应该先提供 SOMELINK。

Biome 解析在未指定规则的情况下抛出错误

我有一个js项目，其中有一些带有函数外部返回语句的文件（.jsx文件）。 使用 Biome 作为 linter/formatter 它会在 vscode 中引发错误，如您所见： 我想禁用它

类型错误：无法读取未定义的属性（读取“节”）

我需要你的帮助。我正在尝试创建一个测验应用程序，但遇到了道具问题。代码似乎有效，但在显示第一个问题后显示未定义。 这是我的代码： 输入图片

为什么在将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}`} 您找到了这位伙伴的解决方案吗？