reactjs - JSX 元素 'h1' 没有对应的结束标签

Question

我正在使用 Visual Studio Code 来学习 ReactJs，但我不知道为什么 HTML 代码出现“JSX 元素没有相应的结束标记”错误。请看图片。



在 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 中保存文件后的代码

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'));

Answer 1

我有一个类似的问题。每次我保存我的代码时都会重新格式化，导致与问题中提出的错误类似的错误。我通过有选择地禁用我在 VS Code 中安装的代码格式化扩展来解决它。我发现禁用“美化”扩展(通过 HookyQR)解决了这个问题。

注意:我发现您可以禁用所有 VS Code 实例或仅工作区的扩展，允许您在逐个工作区的基础上保持事件状态。