嗨,我的反应页面没有出现,请看看我的代码是否有问题 程序在这里编辑,现在是 索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<script type="module" src="./main.tsx"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import 'bootstrap/dist/css/bootstrap.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
应用程序.tsx
import React, { useState } from 'react';
function App() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const handleButtonClick = () => {
setTodos([...todos, input]);
setInput('');
};
return (
<>
<input type="text" placeholder="Enter Todo" value={input} onChange={e => setInput(e.target.value)} />
<button onClick={handleButtonClick}>Add Todo</button>
{todos.map((todo, index) => <p key={index}>{todo}</p>)}
</>
);
}
export default App;
屏幕一片空白
我已保存所有文件并刷新网页,但什么也没有出现
编辑:控制台中出现错误,请参见下文
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.
我的文件有 .tsx 文件格式,所以我不知道为什么会出现这种情况
如果您的
main.tsx
位于 src 文件夹内,则需要在 html 页面中将其引用为:
<script type="module" src="/src/main.tsx"></script>
另外,我没有足够的声誉来发表评论,但是您运行什么 npm 命令来启动该页面?