3

所以我有一个使用 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
  );
};

登录表单组件：

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

谢谢阅读！

4

2 回答 2

6

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

<div id="foo"/>

而渲染调用是

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

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

于 2015-02-16T20:36:38.613 回答
4

错误实际上来自 LoginForm#render 中的此处：

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

那应该是

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

渲染函数应该返回虚拟 dom 节点，而不是挂载它们。您特别收到错误，因为您使用一个参数调用 React.render。

于 2014-11-08T18:34:33.113 回答