jsx 相关问题

有条件地将 prop 添加到 jsx 元素

我有一个 React 应用程序，并尝试根据条件将 prop 传递给 jsx 元素。有问题的元素是一个锚标记，如果条件为真，我想传递一个 rel="

在 React 中设置跨度背景颜色时出错

我正在学习 Jonas Schmedtmann 的全栈速成课程，一切都很好。但在这一部分中，我收到了一个 React 运行时错误（TypeError: Cannot readproperties of undefined (reading 'co...

如何使用 @mdx-js/react 在 React 中正确导入 MDX 文件？

我正在尝试使用 @mdx-js/react 库在我的 React 项目中导入 MDX 文件，但遇到导入路径不正确的问题。 当尝试导入 Content.mdx 时，生成的路径是

将 InputAdornment 应用于 MUI AutoComplete 会删除选项列表

我构建了一个自动完成组件，如下所示： 我构建了一个自动完成组件，如下所示： <Autocomplete freeSolo size="small" id="filter-locks-autocomplete" options={json_list ? json_list : []} groupBy={(option) => option.lock.building} getOptionLabel={(option) => (option.name)} inputValue={inputValue} onInputChange={(event, newInputValue) => setInputValue(newInputValue)} renderInput={(params) => ( <TextField {...params} variant="standard" label={'lock'} InputProps={{ startAdornment: ( <InputAdornment position="start"> <Search sx={{ color: "black", fontSize: 20, marginLeft: "2px" }} /> {params.InputProps.startAdornment} </InputAdornment> ), }} /> )} />; 但是，在框内单击时，选项列表不再出现。 如果我像这样从 <TextField /> 中删除 InputProps： <Autocomplete freeSolo size="small" id="filter-locks-autocomplete" options={json_list ? json_list : []} groupBy={(option) => option.lock.building} getOptionLabel={(option) => option.name} inputValue={inputValue} onInputChange={(event, newInputValue) => setInputValue(newInputValue)} ListboxProps={{ sx: { zIndex: 1500 } }} renderInput={(params) => ( <TextField {...params} variant="standard" label={"lock name"} /> )} />; 选项列表按预期显示。 有没有办法可以将 inputAdornment（只是一个搜索图标）添加到 AutoComplete 组件而不删除选项列表？ 我在这里找到了解决方案，你可以尝试以下代码 <Autocomplete id="tags-standard" options={top100Films} getOptionLabel={option => option.title} defaultValue={[top100Films[13]]} renderInput={params => { return ( <TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" fullWidth InputProps={{ ...params.InputProps, startAdornment: ( <> <InputAdornment position="start"> <SearchIcon /> </InputAdornment> {params.InputProps.startAdornment} </> ) }} /> ); }} /> 工作正常。您还可以在 CodeSandbox 中查看 有关更多详细信息，请检查此 Github Material-ui Issue 对于使用 MUI v.6 的用户，您需要使用 slotProps 来代替： <TextField {...params} variant="standard" label="Multiple values" placeholder="Favorites" fullWidth slotProps={{ input: { ...params.InputProps, startAdornment: ( <> <InputAdornment position="start"> <SearchIcon /> </InputAdornment> </> ), }, }} />

如何在 React Native 中绘制任何类型的形状

我是反应原生新手。我想设计篮球场。 并且该布局的每个部分都可以独立单击。 我只是厌倦了这个。 如果有人知道如何，请帮助我...

从不需要的组件中删除 `import React form 'react'`（React 17 或更高版本）

我刚刚注意到，在 React 17 或更高版本中，我们不需要在每个组件之上导入 React，因此组件如下所示： 从“反应”导入反应 导出常量 Cmp = () => { 返回 （ <...

我创建了这段代码，它显示了以下错误：'TS2604：JSX元素类型'ReactToPrint'没有任何构造或调用签名

从“react”导入 * as React； 从“反应”导入{useRef}； //从'html-react-parser'导入解析； 从“react-toprint”导入ReactToPrint； 导入 { IInputs }...

Typescript 类在为任何子类键入的基类中使用静态方法

我正在尝试为 Web 组件编写一个包装器，它允许您通过引用它们的密钥在 JSX 中使用它们；如果尚未这样做，这也会隐式注册自定义元素，以便...

通过 Photoshop 中的脚本添加的文本中的变音符号

我通过如下脚本将文本添加到 Photoshop 中的图层中： var 图层文本； var 文本项； layerText = activeDocument.artLayers.add(); LayerText.kind = LayerKind.TEXT; LayerText.name = "ch...

无法解析“app\index.jsx”中的“../components”

我一直致力于用 React Native 开发一个应用程序，但我不明白为什么会出现这个错误。每当我尝试从内部文件中提取信息时，我都会收到“iOS Bundling failed Una...

如何在颜色选择器中计算颜色 RGB 代码？

我正在尝试在React中制作一个可重复使用的颜色颜色选择器组件，我想使用256 x 256 div上的鼠标坐标来计算RGB颜色代码，该div具有白色背景颜色并且...

antd datepicker 如何在 const 中创建返回变量？

嗨，我是新手前端开发人员...... 问题在下面 如何在 const onChange 中返回 a ？ 如果可能的话有什么关系？ 从“反应”导入反应 从 'antd' 导入 { DatePicker } ； 变种...

我们可以像这样在jsx组件的回调中使用react hooks吗？

这算不算违反了Hook规则？它不会显示错误/警告“错误：无效的挂钩调用”并且代码正常工作。 useEffect 也只挂载一次 1.✅ 在最高层给他们打电话...

在React中使用Google Gemini API的generateContent方法时出现“TypeError: request is not iterable”

我正在开发一个 React 项目，在该项目中，我使用 Google Gemini API 根据从表单收集的输入来检索信息。但是，当我调用generateContent方法时，我得到以下信息...

警告：无法访问代码，在Reactjs 18中使用函数组件（箭头函数）

我创建了一个函数组件并在react 18中返回JSX，但是我收到了一个奇怪的警告；那个“无法访问的代码” const 标头 = () => { 返回 我创建了一个函数组件并在react 18中返回JSX，但我收到了一个奇怪的警告； “无法访问的代码” const Header = () => { return <div className="header"> <div className="container"> <h1>hello</h1> </div> </div>; }; export default Header; 我以为这是因为缺少括号“()”而发生的，但是当我添加它时 const Header = () => { return ( <div className="header"> <div className="container"> <h1>hello world!</h1> </div> </div>; ) }; export default Header; 我得到的错误是 解析错误：意外的标记，应为“，”(8:10) '）' 预期的。 预期声明或声明。 那是因为我加了一个意想不到的“;”在我的 JSX 之后，当我删除它时，它起作用了 const Header = () => { return <div className="header"> <div className="container"> <h1>hello</h1> </div> </div> }; export default Header; 或 const Header = () => { return ( <div className="header"> <div className="container"> <h1>hello world!</h1> </div> </div> ) }; export default Header; 我只删除了“;” return 语句中 JSX 后面的分号

如何将React组件传递给组件并在组件内部作为组件使用？

我有一个 Button 组件，它允许一些属性（如变量、活动、大小等）更改其样式。 我想要的是将 Button 组件传递给另一个组件并在那里像普通组件一样使用它

React JSX 中的动态标签名称

我正在尝试为 HTML 标题标签（h1、h2、h3 等）编写一个 React 组件，其中标题级别通过 prop 指定。 我尝试这样做： 你好 我正在尝试为 HTML 标题标签（h1、h2、h3等）编写一个 React 组件，其中标题级别是通过 prop 指定的。 我尝试这样做： <h{this.props.level}>Hello</h{this.props.level}> 我期望的输出如下： <h1>Hello</h1> 但这不起作用。 有什么办法可以做到这一点吗？ 无法就地执行此操作，只需将其放入变量中（首字母大写）： const CustomTag = `h${this.props.level}`; <CustomTag>Hello</CustomTag> 如果您使用 TypeScript，您会看到如下错误： Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559) TypeScript 不知道 CustomTag 是有效的 HTML 标签名称，并会抛出无用的错误。 要修复，请将 CustomTag 转换为 keyof JSX.IntrinsicElements！ // var name must start with a capital letter const CustomTag = `h${this.props.level}` as keyof JSX.IntrinsicElements; // or to let TypeScript check if the tag is valid // const CustomTag : keyof JSX.IntrinsicElements = `h${this.props.level}`; <CustomTag>Hello</CustomTag> 为了完整起见，如果想使用动态名称，也可以直接调用 React.createElement，而不是使用 JSX： React.createElement(`h${this.props.level}`, null, 'Hello') 这避免了创建新变量或组件。 搭配道具： React.createElement( `h${this.props.level}`, { foo: 'bar', }, 'Hello' ) 来自文档： 创建并返回给定类型的新 React 元素。类型参数可以是标签名称字符串（例如 'div' 或 'span'），也可以是 React 组件类型（类或函数）。 使用 JSX 编写的代码将转换为使用 React.createElement()。如果您使用 JSX，您通常不会直接调用 React.createElement()。请参阅 React Without JSX 了解更多信息。 所有其他答案都工作正常，但我会添加一些额外的，因为通过这样做： 比较安全一点。即使你的类型检查失败了，你仍然 返回正确的组件。 它更具声明性。任何人通过查看这个组件都可以看到它可以返回什么。 它更灵活，例如代替“h1”，“h2”，...对于您的标题类型，您可以有一些其他抽象概念“sm”，“lg”或“主要”，“次要” 标题组件： import React from 'react'; const elements = { h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', }; function Heading({ type, children, ...props }) { return React.createElement( elements[type] || elements.h1, props, children ); } Heading.defaultProps = { type: 'h1', }; export default Heading; 你可以这样使用它 <Heading type="h1">Some Heading</Heading> 或者你可以有不同的抽象概念，例如你可以定义一个尺寸道具，如： import React from 'react'; const elements = { xl: 'h1', lg: 'h2', rg: 'h3', sm: 'h4', xs: 'h5', xxs: 'h6', }; function Heading({ size, children }) { return React.createElement( elements[size] || elements.rg, props, children ); } Heading.defaultProps = { size: 'rg', }; export default Heading; 你可以这样使用它 <Heading size="sm">Some Heading</Heading> 在动态标题 (h1, h2...) 的实例中，组件可以像这样返回 React.createElement（上面由 Felix 提到）。 const Heading = ({level, children, ...props}) => { return React.createElement('h'.concat(level), props , children) } 为了可组合性，道具和子项都被传递。 参见示例 这就是我为我的项目进行设置的方式。 排版类型.ts import { HTMLAttributes } from 'react'; export type TagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'; export type HeadingType = HTMLAttributes<HTMLHeadingElement>; export type ParagraphType = HTMLAttributes<HTMLParagraphElement>; export type SpanType = HTMLAttributes<HTMLSpanElement>; export type TypographyProps = (HeadingType | ParagraphType | SpanType) & { variant?: | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'subtitle1' | 'subtitle2' | 'caption' | 'overline' | 'button'; }; 版式.tsx import { FC } from 'react'; import cn from 'classnames'; import { typography } from '@/theme'; import { TagType, TypographyProps } from './TypographyType'; const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; const paragraphs = ['body1', 'body2', 'subtitle1', 'subtitle2']; const spans = ['button', 'caption', 'overline']; const Typography: FC<TypographyProps> = ({ children, variant = 'body1', className, ...props }) => { const { variants } = typography; const Tag = cn({ [`${variant}`]: headings.includes(variant), [`p`]: paragraphs.includes(variant), [`span`]: spans.includes(variant) }) as TagType; return ( <Tag {...props} className={cn( { [`${variants[variant]}`]: variant, }, className )} > {children} </Tag> ); }; export default Typography; 你可以尝试一下。我是这样实现的。 import { memo, ReactNode } from "react"; import cx from "classnames"; import classes from "./Title.module.scss"; export interface TitleProps { children?: ReactNode; className?: string; text?: string; variant: Sizes; } type Sizes = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; const Title = ({ className, variant = "h1", text, children, }: TitleProps): JSX.Element => { const Tag = `${variant}` as keyof JSX.IntrinsicElements; return ( <Tag className={cx(`${classes.title} ${classes[variant]}`, { [`${className}`]: className, })} > {text || children} </Tag> ); }; export default memo(Title); //for Typescript interface ComponentProps { containerTag: keyof JSX.IntrinsicElements; } export const Component = ({ containerTag: CustomTag }: ComponentProps) => { return <CustomTag>Hello</CustomTag>; } 概括robstarbuck的答案您可以创建一个完全动态的标签组件，如下所示： const Tag = ({ tagName, children, ...props }) => ( React.createElement(tagName, props , children) ) 你可以这样使用： const App = ({ myTagName = 'h1' }) => { return ( <Tag tagName={myTagName} className="foo"> Hello Tag! </Tag> ) } React + TypeScript 这个实现为 OP 的问题定义了一个简洁的类型安全的可组合方法。它定义了一个 props 类型，该类型将对应于任何有效标题标签的属性以及任何有效的 React 组件属性（例如 className 或 children）。此外，如果 level 的值不是预期的 1 到 6，您将收到 TypeScript 错误。它还解决了之前答案中的“联合”错误。 HeadingWithRef示例更进一步，允许父级访问生成的 DOM 属性，以防您需要对其进行动态处理或读取原始元素的属性值。 //Define the heading properties type interface HeadingProps extends React.ComponentProps<"h1" | "h2" | "h3" | "h4" | "h5" | "h6"> { level: 1 | 2 | 3 | 4 | 5 | 6; } //Define the component const Heading: React.FC<HeadingProps> = ({ level, ...props }) => { const Tag: keyof JSX.IntrinsicElements = `h${level}`; return <Tag {...props} />; }; //If you need ref forwarding const HeadingWithRef = React.forwardRef<HTMLHeadingElement, HeadingProps>( ({ level, ...props }, ref) => { const Tag: keyof JSX.IntrinsicElements = `h${level}`; return <Tag ref={ref} {...props} />; } ); HeadingWithRef.displayName = "HeadingWithRef"; 使用示例 //This will render an <h2> tag export default function DemoPage() { return ( <> <header> <Heading level={2}>Heading</Heading> </header> </> ); }

在登录重定向之前强制ReactJS路由索引重新评估

我希望根据用户本地存储中是否存在令牌，有条件地将经过身份验证的路由包含在我的 ReactJS 应用程序的路由索引中。然而，要实现这一点，路线...

当提供的文件没有标题时禁用或覆盖 jsx-a11y/media-has-caption

我有一个音频文件，我正在从内容中查询，但我没有显示数据，而是不断收到此 eslintrule 弹出窗口。 这是一个音频文件，因此没有字幕。有没有办法禁用此功能或

jsx-a11y/media-has-caption 的 eslint 问题

我有一个音频文件，我正在从 contentful 中查询，但我没有显示数据，而是不断收到此 eslintrule 弹出窗口，它是一个音频文件，因此没有字幕。有没有办法禁用此功能或