首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React语法错误,似乎找不到问题所在。错误: JSX元素'div‘没有对应的结束tag.ts(17008)

React语法错误,似乎找不到问题所在。错误: JSX元素'div'没有对应的结束tag.ts(17008)

这个错误提示表明在React代码中,存在一个JSX元素<div>没有对应的结束tag。这种错误通常是由于以下几种情况引起的:

  1. 忘记添加结束tag:在JSX中,每个元素都需要有一个对应的结束tag,即</div>。请检查代码,确保每个<div>元素都有正确的结束tag。
  2. 嵌套错误:如果在代码中存在多个嵌套的<div>元素,可能会导致错误。请检查代码,确保每个<div>元素都正确嵌套,并且有正确的结束tag。
  3. 使用自闭合标签:在JSX中,可以使用自闭合标签来表示没有子元素的元素,例如<div />。如果你的<div>元素没有子元素,并且意图是使用自闭合标签,那么请确保在代码中使用正确的自闭合语法,即<div />

解决这个错误的方法是仔细检查代码,确保每个<div>元素都有正确的结束tag,并且没有嵌套错误。如果问题仍然存在,可以尝试注释掉部分代码,逐步排查错误所在的位置。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

新手学习 react 迷惑点(一)

如果你把 import React from ‘react’ 删掉,还会报下面这样错误: ?...那么究竟是哪里用到了这个 React,导致我们引入 React 会报错呢,不懂这个原因,那么就是 JSX 没有搞得太明白。...为什么要用 className 而不用 class React 一开始理念是想与浏览器 DOM API 保持一直而不是 HTML,因为 JSX 是 JS 扩展,而不是用来代替 HTML ,这样会和元素创建更为接近...那还是不行,不然官网也不会建议你调用 props 了,虽然 React 会在构造函数运行之后,为 this.props 赋值,但在 super() 调用之后与构造函数结束之前, this.props...            );   } } 更详细内容可见Dan 博客 为什么组件用大写开头 前面以及说过了,JSXReact.createElement(component

69530
  • React入门五:事件处理

    state中值,这是错误!!...> ) } 思想:数据驱动视图4.3 从JSX中抽离事件处理程序 JSX中参杂过多JS逻辑代码,会显得非常混乱 推荐:将逻辑抽离到单独方法中,保证JSX结构清晰 class App...表单处理 6.1 受控组件 HTML中表单元素是可输入,也就是有自己可变状态 而,React可变状态通常保存在state中,并且只能通过setState()方法来修改 React将state与表单元素值...问题:每个表单元素都有一个单独事件处理程序太繁琐 优化:使用一个事件处理程序同事处理多个表单元素 步骤: 1.给表单元素添加name属性,名称与state相同 2.根据表单元素类型获取对应值...3.在change事件处理程序中通过[name]来修改对应state class App extends React.Component { state ={ txt : 10,

    1.8K30

    React基础(3)-不可不知JSX

    react学习(3)-不可不知JSX.png 前言 本篇内容,对上一节补充 JSX中添加属性有什么要注意?以及JSX元素是怎么操作?...JSX 表达式内容将会被作为特定属性 props.children传递给外层组件 其中,有下面几种不同方法来传递子元素 **字符串字面量** 你可以将字符串放在开始和结束标签之间,此时props.children... itclanCode **JSX元素嵌套** 在React中,子元素允许由多个JSX元素组成,组件可以嵌套组件,例如:如下所示 <MyContainer...React组件 如果你定义一个组件首字母是小写,react就会当做一个普通元素来处理,而原生HTML标签并没有把你自定义元素归纳进去,它是会报错 例如:如下所示 import React from...,当导出多个React组件时,使用点语法来引用一个React组件 使用展开运算符 ...在JSX中传递整个props对象 某些时候,是一个非常有用语法,另外,当遍历要渲染是一对象时,对象并没有数组一些方法

    1.8K10

    JSX_TypeScript笔记17

    两种元素区别在于: 生成目标代码不同 React 中,固有元素会生成字符串(比如React.createElement("div")),而自定义组件不会(比如React.createElement(...固有元素类型从JSX.IntrinsicElements接口上查找,如果没有声明该接口,那么所有固有元素都不做类型检查,如果声明了,就在JSX.IntrinsicElements上查找对应属性,作为类型检查依据...属性检查首先要确定元素属性类型(element attributes type),固有元素和基于值元素在属性类型上存在些许差异: 固有元素属性类型:JSX.IntrinsicElements上对应属性类型...基于值元素属性类型:元素实例类型上特定属性类型上对应属性类型,这个特定属性通过JSX.ElementAttributesProperty指定 P.S.如果未声明JSX.ElementAttributesProperty...("div", null); 在Preact里对应 JSX 元素工厂方法为h: /* @jsx preact.h */ import * as preact from "preact"; <div /

    2.3K30

    React学习(三)-不可不知JSX

    > 至于更多插值表达式内容,你可以看上一节React学习(二)-深入浅出JSX 这里要提一下,在属性中嵌入javascript表达式,不要在双大括号外面加上引号,例如,下面的是错误 const...React组件没有内容,你是可以使用 />,单标签来闭合,就像XML语法一样,例如如下所示 const element = JSX标签里面能够包含很多个子元素...欢迎关注微信itclanCoder公众号 川川是全宇宙最帅小伙子 ) 包含在开始和结束标签之间 JSX 表达式内容将会被作为特定属性...,以后更多使用还是Es6class JSX标签第一部分指定了React元素类型 凡是大写字母开头JSX标签元素,就意味着它们是React组件 如果你定义一个组件首字母是小写,React就会当做一个普通元素来处理...,而原生HTML标签并没有把你自定义元素归纳进去,它是会报错 例如:如下所示 import React from 'react'; import ReactDOM from 'react-dom';

    1.3K30

    滴滴前端常考react面试题(附答案)

    React中组件是一个函数或一个类,它可以接受输入并返回一个元素。注意:工作中,为了提高开发效率,通常使用JSX语法表示 React元素(虚拟DOM)。...它返回一个 React 元素,是原生 DOM 组件表示。如果需要渲染多个 HTML 元素,则必须将它们组合在一个封闭标记内,例如 、、 等。...其实 React 本身并不强制使用 JSX。在没有 JSX 时候,React 实现一个组件依赖于使用 React.createElement 函数。...总结: JSX 是一个 JavaScript 语法扩展,结构类似 XML。JSX 主要用于声明 React 元素,但 React 中并不强制使用 JSX。...如果没有key,Rεat就不知道列表中虚拟DOM元素与页面中哪个元素对应。所以在创建列表时候,不要忽略key。在 ReactNative中,如何解决 adb devices找不到连接设备问题?

    2.3K10

    TypeScript:React、拖拽、实践!

    与ts结合使用,并没有特别。...我们只需要把React组件,看成一个class,他和其他calss,并没有什么特别的不同了。 函数式组件同理。 5 JSX 普通ts文件,以.ts作为后缀名。...这大概率是对JSX属性类型理解不到位导致。 理解JSX类型检测之前,我们需要理清楚两个概念。 「固有元素」 通常情况下,固有元素是指html中已经存在元素。例如div。...固有元素div 固有元素使用特殊接口 JSX.IntrinsicElements 来查找。我们也可以利用这个接口,来定义自己固有元素「但是没必要」。...,错误 React自定义组件有两种方式 class 类组件 function 函数组件 由于这两种基于值元素JSX 表达式里无法区分,因此 TypeScript首先会尝试将表达式做为函数组件进行解析

    2.3K10

    手写一个react,看透react运行机制

    但是我们代码里边,根本没有用到React。但是你不引入他就报错了。 为什么呢?可以这样理解,在我们上述js文件中,我们使用了jsx。但是jsx并不能给编译,所以,报错了。...( jsx) }`); + ReactDOM.render(jsx, document.getElementById("root")); 如果此时,我们引入ReactDom,通过render到对应元素...此时,虚拟dom对象,没有办法,区分,哪些元素分别带有什么属性,我们在转义时候优化一下mount。...( jsx) }`); + ReactDOM.render(jsx, document.getElementById("root")); 如果此时,我们引入ReactDom,通过render到对应元素...此时,虚拟dom对象,没有办法,区分,哪些元素分别带有什么属性,我们在转义时候优化一下mount。

    2K30

    手写一个react然后看透react运行机制

    写源码之前必备知识点 JSX 首先我们需要了解什么是JSX。 网络大神解释:React 使用 JSX 来替代常规 JavaScript。...但是我们代码里边,根本没有用到React。但是你不引入他就报错了。 为什么呢?可以这样理解,在我们上述js文件中,我们使用了jsx。但是jsx并不能给编译,所以,报错了。...( jsx) }`); + ReactDOM.render(jsx, document.getElementById("root")); 如果此时,我们引入ReactDom,通过render到对应元素...首先,jsx我们已经知道是一个vnode,而第二个元素即是渲染上页面的元素,假设我们元素是一个html原生标签div。 我们新建一个reactDom.js引入。...此时,虚拟dom对象,没有办法,区分,哪些元素分别带有什么属性,我们在转义时候优化一下mount。

    1.5K20

    手写一个react,看透react运行机制

    写源码之前必备知识点 JSX 首先我们需要了解什么是JSX。 网络大神解释:React 使用 JSX 来替代常规 JavaScript。...但是我们代码里边,根本没有用到React。但是你不引入他就报错了。 为什么呢?可以这样理解,在我们上述js文件中,我们使用了jsx。但是jsx并不能给编译,所以,报错了。...( jsx) }`); + ReactDOM.render(jsx, document.getElementById("root")); 如果此时,我们引入ReactDom,通过render到对应元素...首先,jsx我们已经知道是一个vnode,而第二个元素即是渲染上页面的元素,假设我们元素是一个html原生标签div。 我们新建一个reactDom.js引入。...此时,虚拟dom对象,没有办法,区分,哪些元素分别带有什么属性,我们在转义时候优化一下mount。

    1.2K20

    手写一个react,看透react运行机制_2023-02-13

    写源码之前必备知识点JSX首先我们需要了解什么是JSX。网络大神解释:React 使用 JSX 来替代常规 JavaScript。...但是我们代码里边,根本没有用到React。但是你不引入他就报错了。为什么呢?可以这样理解,在我们上述js文件中,我们使用了jsx。但是jsx并不能给编译,所以,报错了。...(jsx, document.getElementById("root"));如果此时,我们引入ReactDom,通过render到对应元素,整个简版react就已经完成,页面就会完成渲染。...首先,jsx我们已经知道是一个vnode,而第二个元素即是渲染上页面的元素,假设我们元素是一个html原生标签div。我们新建一个reactDom.js引入。...此时,虚拟dom对象,没有办法,区分,哪些元素分别带有什么属性,我们在转义时候优化一下mount。

    96740

    手写一个react,看透react运行机制_2023-03-01

    写源码之前必备知识点 JSX 首先我们需要了解什么是JSX。 网络大神解释:React 使用 JSX 来替代常规 JavaScript。...但是我们代码里边,根本没有用到React。但是你不引入他就报错了。 为什么呢?可以这样理解,在我们上述js文件中,我们使用了jsx。但是jsx并不能给编译,所以,报错了。...) }`); + ReactDOM.render(jsx, document.getElementById("root")); 如果此时,我们引入ReactDom,通过render到对应元素,整个简版...首先,jsx我们已经知道是一个vnode,而第二个元素即是渲染上页面的元素,假设我们元素是一个html原生标签div。 我们新建一个reactDom.js引入。...此时,虚拟dom对象,没有办法,区分,哪些元素分别带有什么属性,我们在转义时候优化一下mount。

    66120

    手写一个react,看透react运行机制2

    写源码之前必备知识点 JSX 首先我们需要了解什么是JSX。 网络大神解释:React 使用 JSX 来替代常规 JavaScript。...但是我们代码里边,根本没有用到React。但是你不引入他就报错了。 为什么呢?可以这样理解,在我们上述js文件中,我们使用了jsx。但是jsx并不能给编译,所以,报错了。...( jsx) }`); + ReactDOM.render(jsx, document.getElementById("root")); 如果此时,我们引入ReactDom,通过render到对应元素...首先,jsx我们已经知道是一个vnode,而第二个元素即是渲染上页面的元素,假设我们元素是一个html原生标签div。 我们新建一个reactDom.js引入。...此时,虚拟dom对象,没有办法,区分,哪些元素分别带有什么属性,我们在转义时候优化一下mount。

    1.4K20

    来手写一个react,理解react运行机制

    写源码之前必备知识点 JSX 首先我们需要了解什么是JSX。 网络大神解释:React 使用 JSX 来替代常规 JavaScript。...但是我们代码里边,根本没有用到React。但是你不引入他就报错了。 为什么呢?可以这样理解,在我们上述js文件中,我们使用了jsx。但是jsx并不能给编译,所以,报错了。...( jsx) }`); + ReactDOM.render(jsx, document.getElementById("root")); 如果此时,我们引入ReactDom,通过render到对应元素...首先,jsx我们已经知道是一个vnode,而第二个元素即是渲染上页面的元素,假设我们元素是一个html原生标签div。 我们新建一个reactDom.js引入。...此时,虚拟dom对象,没有办法,区分,哪些元素分别带有什么属性,我们在转义时候优化一下mount。

    1.1K30
    领券