不变冲突:_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>
<head>
<script src="/bundle.js"></script>
</head>
<body>
</body>
</html>
这是什么意思？
共有1个答案
在执行脚本时，document元素还不可用，因为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。否则，各种第三方代码（Google字体加载器、浏览器插件等等）都可以在React意想不到的情况下修改bodyDOM节点，并导致很难跟踪和调试的奇怪错误。阅读有关此问题的更多信息。
将script放在底部的好处是，如果您将React server呈现添加到项目中，在脚本加载之前，它不会阻止呈现。
不推荐使用react.render，请改用reactdom.render。
示例：
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
-
问题内容： 在制作平凡的React示例页面后，我收到此错误： 未捕获的错误：始终违反：_registerComponent（…）：目标容器不是DOM元素。 这是我的代码： HTML： 这是什么意思？ 问题答案： 在执行脚本时，element尚不可用，因为其本身位于中。虽然这是一个有效的解决方案，以保持在和渲染的情况下，它甚至不如 把你在最底层的 和 渲染根组件到之前它是这样的： 并在中致电： 您应
-
我在生成一个简单的React示例页面后出现此错误： 未捕获错误：不变冲突：_registerComponent（…）：目标容器不是DOM元素。 这是我的代码： HTML: 这是什么意思？
-
问题内容： 我正在尝试在使用Webpack时使用Jest / Enzyme测试React组件。 我有一个非常简单的测试@ 它要拾取的相对组件是： 但是，运行会导致失败： 有错误@ 测试文件引用第4行，该行是的导入，导致失败。堆栈跟踪显示第14行是失败的原因-仅仅是来自的render调用，这是我从未遇到过的挑战（该应用程序可从我的Webpack设置正确渲染）。 对于那些感兴趣的人（Webpack代码
-
问题内容： 我刚开始使用React，所以这可能是一个非常简单的错误，但是我们开始吧。我的html代码非常简单： 请注意，我在这里使用django的加载静态文件。我的JavaScript有点复杂，因此除非有人要求，否则我不会将其全部发布在这里，但是出现错误的行是这样的： 之后，我得到“目标容器不是DOM元素错误”，但似乎document.getElementById（“content”）几乎可以肯定
-
Postgres 10和11的插入说明： 关于冲突[冲突目标]冲突行动 我有一张桌子： 而我想做的 但是我得到一个错误： ON CONFLICT DO UPDATE需要推理规范或约束名称提示：例如，ON CONFLICT（column_name） 为什么我必须提供一个确定的目标？如何提供主键或其他列集？
-
作为一个新的反应者，我被一些看似简单的事情所困扰。不知道我做错了什么。 我有一个组件BasicReactComponent。我喜欢这样： 我试图在我的主文件中调用它，如下所示： 我一直得到下面的错误