JSX 元素“h1"没有相应的结束标记 [英] JSX element 'h1' has no corresponding closing tag
问题描述
我正在使用 Visual Studio Code 来学习 ReactJs,但我不知道为什么 HTML 代码出现JSX 元素没有相应的结束标记"错误.请看图.
I am using Visual Studio Code to learn ReactJs, but I don't know why for HTML code I am getting "JSX element has no corresponding closing tag" error. Please see the picture.
在 Visual Studio Code IDE 中保存文件之前的代码
Code Before I save the file in Visual Studio Code IDE
import React from 'react';
import ReactDOM from 'react-dom';
class HelloWorld extends React.Component {
render() {
return (
<h1>Hello React</h1>
)
}
}
ReactDOM.render( < HelloWorld / > , document.getElementById('root'));
在 Visual Studio Code IDE 中保存文件后的代码
Code after I save the file in Visual Studio Code IDE
import React from 'react';
import ReactDOM from 'react-dom';
class HelloWorld extends React.Component {
render() {
return ( <
h1 > Hello React < /h1>
)
}
}
ReactDOM.render( < HelloWorld / > , document.getElementById('root'));
推荐答案
我遇到了类似的问题.每次我保存我的代码时都会重新格式化,导致与问题中提出的错误类似的错误.我通过有选择地禁用我在 VS Code 中安装的代码格式化扩展来解决它.我发现禁用美化"扩展(由 HookyQR)解决了这个问题.
I had a similar issue. Each time I saved my code was reformatted resulting in a similar the error to that posed in the question. I resolved it by selectively disabling code formatting extensions I'd installed in VS Code. I found disabling the "Beautify" extension (by HookyQR) resolved the problem.
注意:我发现您可以禁用所有 VS Code 实例或仅工作区的扩展,允许您在工作区逐个工作区的基础上保持活动状态.
Note:I found you can disable an extension for either all VS Code instances or just a Workspace, allowing you keep it active on a Workspace by Workspace basis.
这篇关于JSX 元素“h1"没有相应的结束标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!