在制作微不足道的 React 示例页面后出现此错误:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
这是我的代码:
/** @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>
这是什么意思？
最佳答案
到执行脚本时，document 元素还不可用，因为script 本身就在head 中。虽然将 script 保留在 head 和 render on DOMContentLoaded event 中是一种有效的解决方案，最好将 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。 否则，各种第三方代码(Google Font Loader、浏览器插件等)可以在 React 不期望的情况下修改 body DOM 节点，并导致难以跟踪和调试的奇怪错误。 Read more about this issue.
将 script 放在底部的好处是，如果您将 React 服务器渲染添加到项目中，它不会在脚本加载之前阻塞渲染。
更新:(2015 年 10 月 7 日 | v0.14)
React.renderis deprecated, useReactDOM.renderinstead.
示例:
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
关于javascript - 不变违规 : _registerComponent(. ..):目标容器不是 DOM 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26566317/