无法渲染反应组件

时间:2021-03-05 06:42:02

标签: javascript html reactjs

https://www.youtube.com/watch?v=NyZzRSTZQ2Y 我按照这个视频在 VSC 中打开一个 HTML 文件和 JS 文件。但是我无法在网络上渲染 js 文件。网络上没有出现 hi I am tom hi。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>Random Quote Machine</title>
</head>
<body>
<div id="app"></div>

<script type="text/babel" src="./index.js"> </script>
</body>
</html>

index.js

function App(){
return(
<div> hi I am tom hi </div>
);
}


ReactDom.render(<App/>,document.getElementById("app"))

1 个答案:

答案 0 :(得分:2)

index.js 中的最后一行更新为:

ReactDOM.render(<App/>,document.getElementById("app"))

它会起作用。

说明:

  • 你的 index.js 有什么问题? Ans: ReactDOM 是从 react 库导入的对象,用于处理组件的渲染。在您访问 ReactDom 的代码中,请注意大写不同,您指的是 ReactDom 而不是 ReactDOM

请记住,JavaScript 是一种区分大小写的语言。