jsx 相关问题

JSX是一种开源编程语言,或者是具有类和静态类型的AltJS。源代码被编译成高度优化的JavaScript。有关React的问题,请改用[reactjs]!

为什么不将 useState Hook 放在 If 语句中?

直观上,这对我来说是有道理的,但我正在寻找关于 React 编译方式的深入解释,这会导致类似这样的副作用。 const 标头 = () => { 常量 [

回答 1 投票 0

HTML 表没有溢出其容器

我试图让 html 表格溢出其容器,以便在移动设备上有滚动条,但它不起作用。 这是代码: 导出默认函数 Stats({ pokemon }: { pokemon: PokemonWithColo...

回答 1 投票 0

在NextJS中使用外部函数获取数据

我试图通过将获取数据的代码移动到外部文件来限制重复的代码。 我正在使用的 fetchUserInfo 使用 useEffect、useState 挂钩,因此需要是“使用客户端...

回答 1 投票 0

React 组件状态未正确设置

我在 React 组件中有以下 useEffect 钩子,用于从 api 获取数据。 http是一个axios实例。我有一个 React use State 钩子 const [inputsData, setInputsData] = useState(false);....

回答 1 投票 0

为 JSX.Elements / ReactElement 的子集创建接口

我想将所有图标分组,所以我创建了一个 IconInterface 从“./IconProps”导入{ IconProps、CaretProps、CheckboxProps }; 界面图标界面{ (道具:IconProps |

回答 1 投票 0

React - 组件内容未通过

我承认我对 React 比较陌生,但我只是试图将内容从子组件拉到父应用程序组件,但它没有拉入内容,我不知道为什么...... .

回答 1 投票 0

如何在next.js中使用tailwind背景图片? [重复]

我在公共文件夹中有一张名为 bg.png 的背景图片 在页面文件夹的index.js页面中,我想使用该图像作为背景图像 我已经按照文献展安装了 Tailwind...

回答 3 投票 0

如何在React中检查图像是否无效?

我正在尝试为React应用程序创建某种媒体库,但问题是有时用户可能会上传一些损坏的图片,我需要以某种方式检查图像是否可以读取而不是

回答 2 投票 0

如何在 React 中使用 Javascript 检查组件是否已渲染

我正在使用我的组件,如下所示,我想检查内部组件是否正在渲染,并据此做出一些决定。 就像不渲染父组件并显示空内容

回答 1 投票 0

如何为固有 HTML 元素声明 h.JSX?

我想使用自定义 h.JSX 声明而不是 global.JSX,该怎么做? 下面的例子游乐场会失败,如何让它工作? TypeScript 文档说 h.JSX 将立即被拾取...

回答 1 投票 0

自定义版式主题无法覆盖 Next js 中 MUI 中的默认版式

我在 Next.js React 项目中使用带有自定义主题的 Material-UI (MUI)。虽然主题的颜色已正确应用,但我无法更改 H2 和 H5 元素的默认字体大小。我已经

回答 1 投票 0

我们可以在 NodeJS 后端使用 JSX 来构建 XML 吗?

在前端,React 使用 JSX 来渲染其组件的 HTML。 NodeJS 后端是否提供 JSX(或类似)功能,特别是用于渲染(条件)XML? 目前我们使用 tem...

回答 2 投票 0

禁用 Typescript 文件中的突出显示?

当我单击 className 值时,它会突出显示 Vs Code 中的整个文本。我尝试禁用 VS Code 中的所有突出显示设置,但找不到任何解决方案。我想禁用 typecr 中的突出显示...

回答 1 投票 0

未捕获错误:找不到模块

我不知道为什么找不到模块。我认为 webpack.config.js 中的 loader 是错误的,但我不知道如何修复它。 未捕获的错误:找不到模块“./components/Images” 在 webpack 中缺少...

回答 1 投票 0

Tailwind css - 当放置在网格中时,div 没有一直填充到给定空间的顶部

我正在一个个人网站上工作,对这里发生的事情感到困惑。 我有一个 6 列的网格,其中 5 列由“GridItem”占据,并且还有一个额外的剩余

回答 1 投票 0

Laravel 11 Axios POST 请求控制器方法返回 404 错误

尝试使用 Axios 从前端向 Laravel 控制器方法执行 POST 请求时遇到问题。请求 URL 返回 404 错误,如下所示。 AxiosError {消息:'请求...

回答 1 投票 0

循环<li>元素

在 React.js 文档中,我想知道 Array.map() 在 JSX React 中是如何使用的。 函数 NumberList(props) { const 数字 = props.numbers; const listItems = Numbers.map((number) => 在 React.js 文档中,我想知道 Array.map() 在 JSX React 中是如何使用的。 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); return ( <ul>{listItems}</ul> ); } 在<ul>标签中,为什么我们直接放入变量listItems?因为我认为它会返回一个数组而不是像这样的 <li> 元素: <ul> [ <li></li>, <li></li>, <li></li>, ] </ul> JSX 如何处理数组? 我必须手动循环listItems吗? 提前谢谢您。 您可能想看看这里:https://stackabuse.com/how-to-loop-in-react-jsx/。我希望这就是您正在寻找的 map()方法是 JSX 中最常用的迭代数据数组的函数。您可以将 map() 方法附加到数组并传递每次迭代时调用的回调函数。渲染 User 组件时,将唯一值传递给 key 属性。 JSX 将数组视为多个元素。你可以这样编码: function NumberList() { return ( <ul> <li>1</li> <li>2</li> <li>3</li> </ul> ); } 或者使用数组。但是当使用数组时,我们需要为数组中的每个元素添加一个唯一的 key 属性: function NumberList() { const listItems = [ <li key="1">1</li>, <li key="2">2</li>, <li key="3">3</li>, ]; return ( <ul>{listItems}</ul> ); } 如果你想使用一个元素,你可以将所有元素包装到一个Fragment: function NumberList() { const listItems = ( <> <li>1</li> <li>2</li> <li>3</li> </> ); return ( <ul>{listItems}</ul> ); } 使用映射与使用数组相同: function NumberList() { const numbers = [1, 2, 3]; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); return ( <ul>{listItems}</ul> ); } 或者直接在 JSX 中使用地图: function NumberList() { const numbers = [1, 2, 3]; return ( <ul> { numbers.map((number) => <li key={number.toString()}> {number} </li> )} </ul> ); } 关于key属性,请参考React的文档:https://reactjs.org/docs/lists-and-keys.html#keys.

回答 3 投票 0

如何渲染 React 中从 Array.Map() 内部调用的异步函数返回的 JSX?

在我的 React 应用程序中,我调用一个异步函数,该函数从 array.map() 内部渲染 JSX,但没有渲染任何内容。我确认该函数正在被正确调用。 我怀疑...

回答 1 投票 0

jsx中三元运算符的多个条件

黑色是默认颜色,但如果我想添加第三个条件怎么办? 状态可以是“已批准”、“

回答 10 投票 0

无法访问对 UseState 的赋值结果

父组件似乎无法访问 ErrorMessage 我收到此错误... 对象作为 React 子对象无效(找到:带有键 {error_msg} 的对象)。如果您打算渲染

回答 2 投票 0

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.