不变违规：目标容器不是一个DOM元素，当元素在DOM

所以我有一个使用的骨干路由器反应的应用程序，但是当我尝试在DOMContentLoaded导航，我得到：不变违规：目标容器不是一个DOM元素，当元素在DOM

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

我尝试了一下堆栈跟踪，但无法弄清楚发生了什么，因为引发错误的方法（ReactMount._registerComponent）被命中几次，其中第一个不会抛出错误，因为DOM有问题的元素在那里。我使用我在其他项目中使用的组件，没有问题，并剥夺所有作品降到最低调试这（失败至今）：

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>

与路由器代码：

AppRouter.prototype.signIn = function() { 
    var container = document.getElementById('app-container'); 

    React.render(
    <LoginForm />, 
    container 
); 
};

LoginForm的组分：

var LoginForm = React.createClass({ 
    render: function() { 
    return(
     React.render(
     <div id="login-form-component"> 
     </div> 
    ) 
    ); 
    }, 
});

路线被命中，按预期击中- 我错过了什么？

这里是堆栈跟踪，其底部是我的路由器登入方法：

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

感谢您的阅读！

来源

2014-11-08 mattmattmatt

将'console.log（document.getElementById（'app-container'））'放在.signIn中，只是为了检查。 99％的时间意味着你传递了undefined或null作为第二个参数。 – FakeRainBrigand 2014-11-08 18:24:30

我在检查后看到类似的问题，因此元素是:) – mattmattmatt 2014-11-08 18:31:44

错误实际上是从这里来的在LoginForm的＃呈现：

return(
    React.render(
    <div id="login-form-component"> 
    </div> 
) 
);

这应该是

return(
    <div id="login-form-component"> 
    </div> 
);

渲染函数应该返回虚拟DOM节点，而不是将它们安装。由于您使用一个参数调用React.render，因此您明确地得到该错误。

来源

2014-11-08 18:34:33 FakeRainBrigand

呃...哎呀哈哈。我原本不打算在项目中使用'JSX'，然后当我决定切换时，我想我完全错过了......我只觉得有点愚蠢的哈哈。非常感谢！ – mattmattmatt 2014-11-08 18:41:12

如果React.render中的目标div ID拼写错误，您也可能会收到此错误。如果您的index.html包含

<div id="foo"/>

而呈现呼叫

React.render(React.createElement(App, null), document.getElementById("bar"));

然后目标容器不是一个DOM元素被抛出（注意：酒吧 ID而不是富）。

来源

2015-02-16 20:36:38 user194715

不变违规：目标容器不是一个DOM元素，当元素在DOM

回答

相关问题