Question

所以我有一个使用Backbone路由器的反应应用程序，但是当我尝试在DOMContentLoaded上导航时，我得到：

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>
      )
    );
  },
});

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

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

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

感谢阅读！

Answer 1

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

<div id="foo"/>

，而渲染调用是

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

然后目标容器不是DOM元素被抛出（注意 bar id而不是 foo ）。

Answer 2

错误实际上来自LoginForm＃render：

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

那应该是

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

渲染函数应该返回虚拟dom节点，而不是挂载它们。你专门得到错误，因为你用一个参数调用React.render。

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

2 个答案: