jsx 相关问题

React app with Vite：使用react-router-dom设置路由后的空白页面

即使在向其渲染组件后，我的反应页面也是空白的。我尝试在 main.jsx 文件上显示一个段落，但它仍然没有显示。 我仔细按照教程视频安装了...

希望包装的内容仅使用 CSS 向下扩展

我有一个搜索字段，它会自动填充不同的俏皮行，这些行可能需要也可能不需要换行以适合所有单词。这是锚定到居中的父级，确保搜索字段应用程序...

将组件实例直接传递到 prop 中还是使用渲染回调？

处理父组件希望子组件呈现一些自定义 JSX 的情况的惯用和/或更有效的方法是什么？ 渲染回调？ 或传递组件安装...

问题是无法读取React Native中未定义的属性“key”？

我从昨天开始就遇到这个问题，我没有找到任何解决方案，请帮助我， 虽然我的代码没有错别字…… 应用程序.js 从“反应”导入反应； 从 &...导入登录

有条件地将 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 组件传递给另一个组件并在那里像普通组件一样使用它