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屋！