黑屏反应网页未出现

问题描述 投票:0回答:1

嗨,我的反应页面没有出现,请看看我的代码是否有问题 程序在这里编辑,现在是 索引.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 文件格式,所以我不知道为什么会出现这种情况

html reactjs typescript web react-typescript
1个回答
0
投票

如果您的

main.tsx
位于 src 文件夹内,则需要在 html 页面中将其引用为:

<script type="module" src="/src/main.tsx"></script>

另外,我没有足够的声誉来发表评论,但是您运行什么 npm 命令来启动该页面?

© www.soinside.com 2019 - 2024. All rights reserved.