解决react报错“JSX 表达式必须具有一个父元素“

最新推荐文章于 2024-03-28 21:18:12 发布
最新推荐文章于 2024-03-28 21:18:12 发布
阅读量1.1k 收藏 1
点赞数 1
文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaohuizhuang6019/article/details/133094813
版权

现象如下：

 

 原因： 新插入的dom元素跟已有的dom元素平级了，必须创建一个共有的根元素

解决办法： 使用<>   </>标签作为根元素，把所有子元素包裹起来

<>   

      ....原代码

</>

 问题解决！报错消失！

kingtopest
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react示例_最好的React示例
cumian8165的博客
08-14 1274
react示例React (also known as React.js) is one of the most popular JavaScript front end development libraries. Here is a collection of React syntax and usage that you can use as a handy guide or referen...
谈谈JSX的编译原理
anderlaw的博客
05-08 1307
说起JSX，几乎无人不知：它在React扮演着描述了UI界面、关联渲染逻辑的重要角色。但JSX如何被编译、又如何变成一个个的元素，相信就没那么多人知道了。本文将对JSX编译结果分析，以加深对React里JSX工作原理的理解 准备JSX编译环境 需要安装三个包(开发依赖) @babel/cli @babel/core @babel/preset-react 安装完毕在根目录添加配置文件.babelrc,内容如下： { "presets": ["@babel/preset-react"] } 最后.
json2jsx:一个将JSON内容转换为一组React组件的Node JS库
05-03
Json2jsx 一个NodeJs库，它将json视图模型（一个普通的.json文件）转换为一组有状态或无状态组件。 如何使用 步骤1： 为React JS创建一个空项目（例如，使用 ） 第2步： 创建或下载任何json文件（在本自述文件的底部，您可以找到不同的示例）。 即nasa.open.api.json 第三步： 运行json2jsx并将此json文件作为参数传递。 这将根据json结构创建一个包含任何匹配的React组件的文件夹。 json2jsx nasa.open.api.json 第四步： 编辑指向新创建的App.js的默认index.js（根组件默认文件名，可以通过修改选项进行更改）。 此时，您已经可以运行npm start并在本地节点Web服务器上查看结果（通常在localhost端口3000上运行） 步骤5（可选）： 此步骤完全是可选步骤，但可以显示此
vite-plugin-react-jsx:一个Vite插件，增强了React的jsx转换
05-11
vite-plugin-react-jsx 这是的插件，与React一起使用时可增强jsx的转换。 在开发模式下，它将在开发模式下添加调试信息，以便React Devtools（和其他工具）可以显示元素来自的文件名和行号，这在调试时非常有用。 这确实意味着您除了使用vite的编译管道外还使用 ，这可能会使事情变慢（TODO：测量速度的差异。） 当然，可以随时删除它，而不会以任何方式破坏您的应用程序。 这个特定的转换非常简单，因此这里有机会将其实现为独立的东西，可能使用Go或Rust等其他语言（甚至说服esbuild在内部实现）。 （可选）（通过runtime: 'automatic' ），您可以启用； 这可能会受益于较小的包装束和即将进行的优化，但是也将在生产过程中使用。 （待办事项：测量可能会变慢多少。） 我正在考虑删除此选项，它可能会绊倒那些可能很少获得胜利的人。 ，可能
javaScript | 报错：JSX expressions must have one parent element
最新发布
ZM20170703的博客
03-28 462
React的核心概念是虚拟DOM（Document Object Model），它允许开发者通过声明式编程来描述用户界面，然后React会高效地更新和渲染界面。这个规则的原因是JSX最终会被编译成调用React.createElement()的普通JavaScript代码，而React.createElement()一次只能返回单个React节点。在JSX中，你可以将HTML标签和JavaScript表达式结合在一起，从而使代码更加清晰和模块化。在React和JSX中，每个JSX表达式都必须有一个父元素。
react 也就这么回事 03 —— JSX 的注意点
qq_38650754的博客
02-24 1697
1 JSX 是一个表达式 JSX 是 JavaScript 的语法扩展，本质上是 React.createElement()方法的语法糖。 Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用，所以它被看作一个表达式。 这意味着你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX： function getGreeting(user) { if (user) { retur
JSX中使用JS表达式的规则（React）
weixin_43694465的博客
05-10 471
规则 在jsx中想使用js的表达式，需要用“｛｝”把表达式包裹起来 例子 <div> <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} /> <button>提交</button> </div> ...
React基础
weixin_48554873的博客
06-13 452
React基础 什么是React React是一个构建用户界面的JavaScript库，主要用来编写HTML页面或构建Web应用 React的特点 声明式 组件化 一次学习，随处编程 React的基本使用 1.安装命令 npm i react react-dom react 是核心包，提供创建元素和组件能力 react-dom 负责将元素和组件渲染到界面 2.React使用 <body> <!-- 创建React元素 --> <div id="app">&lt
JSX提示Parsing error: Unexpected token ＜eslint | Parse errors in imported module ‘./Demo9‘: Unexpected
eadela的博客
08-31 2642
jsx在vue中配置出现问题
typescript 错误码大全
ispaomoya博客
03-15 8501
typescript错误码大全，ts错误码
jsx-dom:使用JSX创建DOM元素
04-30
使用JSX创建DOM元素。 支持ES模块和TypeScript。 安装 npm install --save jsx-dom yarn install jsx-dom 用法 注意： jsx-dom仅是ESM。 如果您绝对需要CommonJS支持，请改用jsx-dom-cjs 。 注意：如果您使用的是 ...
react-一个无痛使用React与JSX的迷你React框架
08-14
一个无痛使用React与JSX的迷你React框架
react-element-to-jsx-string:将ReactElement变成相应的JSX字符串
05-11
react-element-to-jsx字符串 将ReactElement变成相应的JSX字符串。 对于单元测试和您可能想到的任何其他需求很有用。 特征： 支持嵌套和深层嵌套，例如<div a={{b:>}}}} /> props：支持字符串，数字，函数（以prop={...
React Quickly Painless web apps with React, JSX, Redux, and GraphQL-原书代码
04-02
<<React Quickly Painless web apps with React, JSX, Redux, and GraphQL>>原书代码，方便大家学些
React 介绍
weixin_30659829的博客
04-17 137
ttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind The smallest React example looks like this: ReactDOM.render( <h1>Hello, world!</h1>, ...
TS错误信息列表
热门推荐
Jinmy的博客
07-11 9万+
错误信息列表code类型英文描述中文描述1002错误Unterminated string literal.未终止的字符串文本。1003错误Identifier expected.应为标识符。1005错误'{0}' expected.应为“{0}”。1006错误A file cannot have a reference to itself.文件不能引用自身。1009错误Trailing comm...
jsx文件eslint报错 Parsing error: Unexpected token ＜ eslint
小绵杨
01-05 4770
最近在使用react native开发app的发现一个问题：报错详情：可以看到，这是jsx的正确写法，并没有语法错误，但是eslint还是报错，大致意思就是意外的符号，可以大概推断是eslint没有正确解析jsx语法造成的，虽然程序可以正常运行，但是对于强迫症来说，确实受不了。
003-react中的jsx的基本使用
杨勇博客之家
09-06 215
历史文章目录连接：https://blog.csdn.net/yy763496668/article/details/113117040此链接为CSDN连接，目的为方便大家一览博客目录！内...
十种常见的react报错和解决方法
06-09
1. "Cannot read property 'xxx' of undefined" 这通常是由于在使用组件或变量之前没有初始化它们所致。解决方法是确保在使用变量或组件之前初始化它们。 2. "Unexpected token" 这通常表示代码中存在语法错误。解决方法是检查代码并纠正语法错误。 3. "Invalid hook call" 这通常是由于在条件语句或循环中使用钩子函数所致。解决方法是确保在使用钩子函数时遵循规则。 4. "Maximum update depth exceeded" 这通常是由于组件无限循环地重新渲染所致。解决方法是检查组件是否在渲染过程中引入了循环依赖。 5. "Failed to compile" 这通常是由于代码中存在语法错误或不完整的代码所致。解决方法是检查代码并纠正错误。 6. "Module not found" 这通常是由于代码中引用了不存在的模块或文件所致。解决方法是确保代码中引用的模块或文件存在。 7. "TypeError: xxx is not a function" 这通常是由于使用了错误的数据类型所致。解决方法是确保使用正确的数据类型。 8. "Network error" 这通常是由于网络连接问题所致。解决方法是检查网络连接并确保它正常运作。 9. "Element type is invalid" 这通常是由于组件的名称被错误地引用所致。解决方法是确保正确地引用组件。 10. "State updates from an unmounted component" 这通常是由于在组件卸载后继续更新组件状态所致。解决方法是确保在组件卸载后停止更新状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值