不变冲突：_registerComponent(...)：目标容器不是DOM元素
在创建一个简单的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>这是什么意思？
回答 14
Stack Overflow用户
发布于 2014-10-26 03:24:15
在执行脚本时，document元素还不可用，因为script本身在head中。虽然将script保留在head和render on DOMContentLoaded event中是一个有效的解决方案，但更好的做法是将您的放在的最底部，并将<>e118呈现根组件放在之前，如下所示：
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>在bundle.js中，调用：
React.render(<App />, document.getElementById('root'));你应该总是渲染到一个嵌套的 DOM 而不是DOM节点，否则，各种第三方代码(Google Font Loader，浏览器插件，等等)可能会在React没有预料到的时候修改body DOM节点，并导致很难跟踪和调试的奇怪错误。Read more about this issue.
将script放在底部的好处是，在脚本加载之前，它不会阻止渲染，以防您将React服务器渲染添加到项目中。
更新时间：( 2015 -10- 07 | v0.14)
React.render已弃用，请改用ReactDOM.render。
示例：
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));Stack Overflow用户
发布于 2015-03-10 21:33:16
/index.html
<!doctype html>
<html>
<head>
<title>My Application</title>
<!-- load application bundle asynchronously -->
<script async src="/app.js"></script>
<style type="text/css">
/* pre-rendered critical path CSS (see isomorphic-style-loader) */
</style>
</head>
<body>
<div id="app">
<!-- pre-rendered markup of your JavaScript app (see isomorphic apps) -->
</div>
</body>
</html>/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
function run() {
ReactDOM.render(<App />, document.getElementById('app'));
}
const loadedStates = ['complete', 'loaded', 'interactive'];
if (loadedStates.includes(document.readyState) && document.body) {
run();
} else {
window.addEventListener('DOMContentLoaded', run, false);
}(IE9+)
备注：在标题中包含<script async src="..."></script>可以确保浏览器在加载JavaScript内容之前就开始下载HTML。
Stack Overflow用户
发布于 2014-12-30 01:14:03
ready function可以像这样使用：
$(document).ready(function () {
React.render(<App />, document.body);
});如果您不想使用jQuery，可以使用onload函数：
<body onload="initReact()">...</body>https://stackoverflow.com/questions/26566317
复制相似问题
腾讯云开发者
