Question

我试图使用ReactDOM渲染方法在主html文件上渲染一个简单的div，但div没有在屏幕上渲染，也没有抛出异常。我做错了吗？

app.js：

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

ReactDOM.render(
  <h1> Hi! </h1>, document.getElementById('root')
);

的index.html：

<!doctype html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1> Hello World! </h1>
    <div id="root"></div> 
  </body> 
</html>

屏幕仅显示＆＃34; Hello World！＆＃34; h1标签。

我也使用webpack webpack dev服务器和Babel。

Answer 1

原因是您忘记在bundle.js中添加html文件，请在正文中添加此行：

<script src = "bundle.js"></script>

试试这个：

<!DOCTYPE html>
<html>
   <head>
      <title>Example</title>
   </head>
   <body>
      <h1> Hello World! </h1>
      <div id="root"></div> 
      <script src = "bundle.js"></script>
   </body>
</html>

而不是<!doctype html>使用<!DOCTYPE html>。

bundle.js ：当您运行webpack时，它会从您在webpack.config.js中定义的入口点开始执行，它将编译您的所有文件并创建一个{ {1}}文件。您需要在bundle文件中包含bundle。

注意：如果您使用html以外的名称，请更改路径和文件名。

检查用户定义组件的答案：Simple Component is not rendering: React js

ReactDOM不呈现简单的div

1 个答案: