Javascript Invariant Violation：当元素在 DOM 中时，目标容器不是 DOM 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26820358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Invariant Violation: Target container is not a DOM element, when element is in the DOM
提问by mattmattmatt
So I have a react app using the Backbone router, yet when I try to navigate on DOMContentLoaded, I get:
所以我有一个使用 Backbone 路由器的 React 应用程序，但是当我尝试导航时DOMContentLoaded，我得到：
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
I have tried stepping through the stack trace, but can't figure out what is going on, as the method that throws the error (ReactMount._registerComponent) is hit a several times, the first couple of which do not throw the error, as the DOM element in question is there. I am using components I have used in other projects, without issue, and have stripped all pieces down to the minimum to debug this (unsuccessfully so far):
我试过单步执行堆栈跟踪，但无法弄清楚发生了什么，因为抛出错误 ( ReactMount._registerComponent) 的方法被多次击中，其中前几个不会抛出错误，因为 DOM 元素有问题。我正在使用我在其他项目中使用过的组件，没有问题，并且已将所有部分精简到最低限度以进行调试（到目前为止未成功）：
DOM structure:
DOM结构：
<html>
<head>
</head>
<body>
<div id="app-container">
</div>
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script type="text/javascript" src="js/application.js"></script>
</body>
</html>
with the router code:
使用路由器代码：
AppRouter.prototype.signIn = function () {
var container = document.getElementById( 'app-container' );
React.render(
<LoginForm />,
container
);
};
LoginForm component:
登录表单组件：
var LoginForm = React.createClass({
render: function () {
return(
React.render(
<div id="login-form-component">
</div>
)
);
},
});
The route is hit, LoginForm#renderis hit as expected -- what am I missing?
路线被击中，LoginForm#render按预期击中 - 我错过了什么？
Here is the stack trace, the bottom of which is my router signin method:
这是堆栈跟踪，其底部是我的路由器登录方法：
invariant
ReactMount._registerComponent
(anonymous function)
ReactPerf.measure.wrapper
ReactMount.render
ReactPerf.measure.wrapper
React.createClass.render
(anonymous function)
ReactPerf.measure.wrapper
(anonymous function)
ReactPerf.measure.wrapper
ReactComponent.Mixin._mountComponentIntoNode
Mixin.perform
ReactComponent.Mixin.mountComponentIntoNode
(anonymous function)
ReactPerf.measure.wrapper
ReactMount.render
ReactPerf.measure.wrapper
AppRouter.signin
Thanks for reading!
谢谢阅读！
回答by mp31415
You may also get this error if the target div id in React.render is misspelled. If your index.html contains
如果 React.render 中的目标 div id 拼写错误，您也可能会收到此错误。如果您的 index.html 包含
<div id="foo"/>
while the render call is
而渲染调用是
React.render(React.createElement(App, null), document.getElementById("bar"));
then Target container is not a DOM elementis thrown (note barid instead of foo).
然后Target 容器不是一个 DOM 元素被抛出（注意barid 而不是foo）。
回答by Brigand
The error is actually coming from here in LoginForm#render:
错误实际上来自 LoginForm#render 中的这里：
return(
React.render(
<div id="login-form-component">
</div>
)
);
That should be
那应该是
return(
<div id="login-form-component">
</div>
);
The render function should return the virtual dom nodes, not mount them. You specifically get the error because you're calling React.render with one argument.
渲染函数应该返回虚拟 dom 节点，而不是挂载它们。您特别会收到错误，因为您使用一个参数调用 React.render。
