Javascript 如何在react中使用render（）？_Javascript_Reactjs

Javascript 如何在react中使用render（）？

javascript reactjs

Javascript 如何在react中使用render（）？,javascript,reactjs,Javascript,Reactjs,我刚开始学习React并尝试让Render（）工作我无法将内容添加到我的html页面这是我的index.html <html> <head> <script async src="/bundle.js"></script> </head> <body> <div id="app"></div> </body> </html> 这是我的main.js import

我刚开始学习React并尝试让Render（）工作

我无法将内容添加到我的html页面

这是我的index.html

<html>
<head>
<script async src="/bundle.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

这是我的main.js

import React from 'react';
import ReactDOM from 'react-dom';

class Layout extends React.Component{
  render(){
    return (
      <h1>It works!</h1>
    );
  }
}

document.addEventListener('DOMContentLoaded', function() {
 ReactDOM.render(<Layout />, document.getElementById('app'));
});

从“React”导入React；
从“react dom”导入react dom；
类布局扩展了React.Component{
render（）{
返回(
它起作用了！
);
}
}
document.addEventListener（'DOMContentLoaded'，function（）{
ReactDOM.render（，document.getElementById（'app'））；
});

我尝试过不使用js引用的代码，但两者都不起作用

<html>
  <head>
    <script src="bundle.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(<h1>Hello World</h1>, document.getElementById('app'));
    </script>
  </body>
</html>


render（helloworld，document.getElementById（'app'）；

要渲染dom，只需将脚本标记放在要渲染的元素之后

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React app</title>
</head>
<body>
<div id="app"></div>
<script src="app.min.js"></script>
</body>
</html>


反应应用程序

在main.js中：

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

ReactDOM.render（，document.getElementById（'app'））

不需要这样放置事件侦听器。

您的第一个html具有异步脚本标记，可以加载内容，但不能加载脚本。第二个html，ReactDOM是从哪里加载的？你的控制台中有错误吗？哦，是的。第二个html有一个错误：bundle.js:304未捕获错误：_registerComponent（…）：目标容器不是DOM元素。@earthyearth这是因为它在div id app之前加载。@T4rk1n我在头部调用了bundle.js。没有加载吗？我在之后移动了，但它仍然不起作用。@earthyearth您删除了事件侦听器吗？@earthyearth您的文件或配置中肯定有其他内容，因为我一直在使用它，它可以工作。我也这么认为。我得到的错误在bundle.js函数不变量（条件、格式、a、b、c、d、e、f）中的这个函数中；这和什么有关系吗？@earthyearth在渲染前尝试一下console.log（document.getElementById（'app'）。