Webpack、React 和 Babel，不渲染 DOM

Question

我终于在几个小时后完成了我的 Webpack、React 和 Babel 构建设置，但是当我尝试运行一个简单的渲染时 Hello World它不会在 DOM.

中输出任何内容

这是我的代码。

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('content')
);

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <script src="bundle.js"></script>
</head>
<body>
 <div id="content"></div>
</body>
</html>

当我观看 bundle.js 时，我可以看到它导入了所有 React 和 ReactDOM 我需要运行渲染。

我运行ning 的测试来自：https://facebook.github.io/react/docs/getting-started.html.

出现此控制台错误：Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

Answer 1

bundle.js 在 content 元素尚未解析和创建时执行。只需将 script 元素移动到标记的 end。

Answer 2

您的 bundle.js 文件在 DOM 来得及加载之前正在加载。这意味着它无法在您请求时找到您的 <div id="content">。

尝试将脚本加载器放在正文末尾之前。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
</head>
<body>
    <div id="content"></div>
    <script src="bundle.js"></script>
</body>
</html>

当浏览器找到 <script> 标签时，它们会在下载文件时暂停执行。这意味着当您的 bundle.js 脚本开始执行时，您的 DOM 仅部分呈现。所以你基本上是将 undefined 传递给 ReactDOM.render 方法。

如果您过去没有遇到过这个问题，也许您一直在使用 jQuery.ready 事件处理程序，它会在执行前等待 DOM 加载。

Webpack、React 和 Babel，不渲染 DOM

Webpack, React & Babel, not rendering DOM

javascript

reactjs

webpack