Question

我最后几个小时制作了我的网络包装，反应和放大bable setup build但是当我尝试运行一个简单的渲染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＆amp; ReactDOM我需要运行渲染。

我正在运行的测试形式为：https://facebook.github.io/react/docs/getting-started.html

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

Answer 1

在DOM有时间加载之前，正在加载您的bundle.js文件。这意味着，当您要求时，它将无法找到您的<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。

Answer 2

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

Webpack，React＆amp; Bable，不渲染DOM

2 个答案: