使用react构建失败

Question

运行npm run dev时出现此错误

Plugin: vite:react-babel
File: /components/Header.jsx:7:13
5  |      return(
6  |          <header>
7  |              <!-- Navbar -->
|               ^
8  |              <Navbar />
9  |              <!-- Navbar -->

和

components/Header.jsx: Unexpected token (7:13)
5 |     return(
6 |         <header>
>  7 |             <!-- Navbar -->

这里是包。json文件

{
"name": "name",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.24",
"@types/react-dom": "^18.0.8",
"@vitejs/plugin-react": "^2.2.0",
"tailwindcss": "^3.2.4",
"vite": "^3.2.3"
}
}

这是我的标题。jsx文件

import React from "react";
import Navbar from "./Navbar.jsx";
const Header = (props) => {
return(
<header>
<!-- Navbar -->
<Navbar />
<!-- Navbar -->
<!-- Background image -->
<div className="relative overflow-hidden bg-no-repeat bg-cover" style="
background-position: 50%;
background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/146.webp');
height: 350px;
">
<div className="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
style="background-color: rgba(0, 0, 0, 0.75)">
<div className="flex justify-center items-center h-full">
<div className="text-center text-white px-6 md:px-12">
<h1 className="text-5xl font-bold mt-0 mb-6">Heading</h1>
<h3 className="text-3xl font-bold mb-8">Subeading</h3>
<button type="button"
className="inline-block px-6 py-2.5 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
data-mdb-ripple="true" data-mdb-ripple-color="light">
Get started
</button>
</div>
</div>
</div>
</div>
<!-- Background image -->
</header>
)
}
export default Header;

这是我的vite配置文件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})

Answer 1

虽然JSX使用了与html非常相似的东西，但它仍然是JS，所以注释必须包含在{}

在你的页眉。将第7行和第9行改为

{/* Navbar (Or your comment)*/}

你可以在以下网站阅读更多内容:

https://pt-br.reactjs.org/docs/introducing-jsx.html

https://www.folkstalk.com/2022/09/how - - -注释掉的代码在代码-反应- js - - -例子- 2. - html

如果你正在使用VSCode，你可以按Ctrl + /

Answer 2

HTML注释不能在JSX中使用。注释的正确语法应该是

return (
<header>
{/* Navbar */}
<Navbar />
{/* Navbar */}
...

标准HTML会导致错误，因为它是在呈现组件时被解析的。