不变违规：_registerComponent（…）：目标容器不是DOM元素

小编典典

不变违规：_registerComponent（…）：目标容器不是DOM元素

reactjs

在制作平凡的React示例页面后，我收到此错误：

未捕获的错误：始终违反：_registerComponent（…）：目标容器不是DOM元素。

这是我的代码：

/** @jsx React.DOM */
'use strict';

var React = require('react');

var App = React.createClass({
  render() {
    return <h1>Yo</h1>;
  }
});

React.renderComponent(<App />, document.body);

HTML：

<html>
<head>
  <script src="/bundle.js"></script>
</head>
<body>
</body>
</html>

这是什么意思？

阅读 282

2020-07-22

共1个答案

小编典典

在执行脚本时，documentelement尚不可用，因为script其本身位于中head。虽然这是一个有效的解决方案，以保持script在head和渲染的DOMContentLoaded情况下，它甚至不如
把你script在最底层的body 和渲染根组件到div之前它是这样的：

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

并在中bundle.js致电：

React.render(<App />, document.getElementById('root'));

您应始终渲染为div而不是嵌套body。否则，body当React不期望时，各种第三方代码（Google字体加载器，浏览器插件等）都可以修改DOM节点，并导致难以跟踪和调试的奇怪错误。阅读有关此问题的更多信息。

放在script底部的好处是，如果您将React Server渲染添加到项目中，则在脚本加载之前它不会阻止渲染。

更新：（2015年10月7日|

v0.14）

React.render已弃用，请ReactDOM.render 改用。

例：

import ReactDOM from 'react-dom';

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

2020-07-22