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

  • Z时代
  • 2024-01-10
  • 分类：问答

在制作平凡的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>

这是什么意思？

回答：

在执行脚本时，documentelement尚不可用，因为script其本身位于中head。虽然这是一个有效的解决方案，以保持script在head和渲染的DOMContentLoaded情况下，它甚至不如

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

并在中bundle.js致电：

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

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

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

更新：

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

import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

以上是 不变违规：_registerComponent（…）：目标容器不是DOM元素 的全部内容， 来源链接： utcz.com/qa/410690.html

回到顶部