JSX 元素“h1”没有相应的结束标记。ts(17008)

Posted 2023-02-22

【中文标题】JSX 元素“h1”没有相应的结束标记。ts(17008)

【英文标题】：JSX element 'h1' has no corresponding closing tag.ts(17008)

【发布时间】：2021-05-04 18:08:43

【问题描述】：

每当我将 index.js 保存在 vscode 中的 react.js@17.0.1 版本文件中时，代码都会以丑陋的方式重新格式化并显示如下图所示的错误：

我已经尝试了 Google 上所有可能的解决方案，但没有结果。

从卸载并重新安装 vscode 到更漂亮的卸载，重新启动 vscode，再次安装并再次重新启动 vscode，一次又一次地 create-react-app 等等。我怎样才能走上正轨？

【问题讨论】：

@Rahul Jindal 请查看***.com/questions/47161385/…

index.js?我认为应该是 index.jsx。

这能回答你的问题吗？ JSX element 'h1' has no corresponding closing tag

@AjeetShah 我做了 create-react-app reacttutorial 并为我创建了环境。即使尝试使用 .jsx 但没有用。我已经从 Reactjs 或 JSX 下载了所有推荐的扩展，但没有结果。我已经尝试了***上关于此的所有可用内容。但是它们都不起作用，这就是我发布这个问题的原因。我知道它已经在那里了。我希望我能尽快解决这个问题，我想学习反应，我只是沉迷于这个错误。试过谷歌搜索，***，Youtube。我已经为此苦苦挣扎了 15 小时

@RahulJindal 所以，这个问题只有在你使用 VSCode 时才会出现，并且你可以使用记事本成功保存并运行 React 项目，对吧？

【参考方案1】：

原因是使用了格式扩展。

解决问题的步骤

禁用格式化扩展。 从代码中删除多余的空格。 保存

这应该可以解决问题！

【参考方案2】：

可能是因为你的 vscode 的格式化程序扩展。请务必使用 js 代码格式化程序格式化你的代码。

【参考方案3】：

将文件从 index.js 更改为 index.jsx 并重新编写标签以及“hello world”对我有用。

然后，我将 index.jsx 改回 index.js 并且错误没有再次出现。不知道为什么...

【参考方案4】：

要使用html 语法，您需要指定.jsx 或.tsx 文件扩展名。

如果你想制作没有 JSX 语法的 React 元素，请使用 createElement(...)

创建 React 元素

我们建议使用 JSX 来描述您的 UI 应该是什么样子。每个 JSX 元素只是调用 React.createElement() 的语法糖。如果您使用 JSX，通常不会直接调用以下方法。

createElement() createFactory()

来源：https://reactjs.org/docs/react-api.html

【参考方案5】：

首先，您必须将文件从“.js”重命名为“.jsx”

然后，你可以试试这个语法：

const element = <h1>this is something written in js</h1>;

ReactDOM.render(element, document.getElementById('root'));

=> JSX 标签 (<Component />) 不是标准的 javascript，如果将它们放在 .js 文件中，则没有特殊含义

=> 如果您想在 .js 文件中创建元素，请查看 https://developer.mozilla.org/fr/docs/Web/API/Document/createElement 或 https://reactjs.org/docs/react-api.html

【参考方案6】：

将文件扩展名从 .js 文件重命名为 .jsx

在屏幕底部，您会看到语言模式（当前设置为 Javascript）。

-> 点击“设置语言模式”

-> 然后将您的语言模式设置为“JavaScript React”

【参考方案7】：

在 Visual Studio Code 上寻找一个滚轮图标，它位于帐户图标下方 [类似于人形]，在我的例子中位于左下方。 如果您将鼠标悬停在滚轮上 => Manage 标签会出现。 单击滚轮，会弹出一个菜单，您将在其中看到 Extensions 。点击扩展。现在在你的 extensions 中寻找 JS-CSS-HTML-formatter 。在 JS-CSS-HTML-formatter 旁边，您会再次看到滚轮图标；单击它并从弹出菜单中选择禁用或卸载

更多文档，请咨询： https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter