Question

我刚开始学习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'));
});

我尝试过不使用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>

Answer 1

要渲染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'))

无需以这种方式设置事件监听器。

如何使用render（）做出反应？

1 个答案: