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

Posted

技术标签:

【中文标题】不变违规：当元素在 DOM 中时，目标容器不是 DOM 元素【英文标题】：Invariant Violation: Target container is not a DOM element, when element is in the DOM 【发布时间】：2015-01-05 08:57:14 【问题描述】：

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

感谢阅读！

【问题讨论】：

将console.log(document.getElementById( 'app-container' )) 放入.signIn 中，只是为了检查。 99% 的情况下，这意味着您将 undefined 或 null 作为第二个参数传递。 我在阅读了关于 SO 的类似问题后进行了检查，并且该元素存在 :) 【参考方案1】：

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

<div id="foo"/>

渲染调用时

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

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

【讨论】：

【参考方案2】：

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

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

应该是这样的

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

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

【讨论】：

嗯...哎呀哈哈。我本来是不打算在项目中使用JSX的，然后当我决定切换回来时，我想我完全错过了……我只觉得有点傻哈哈。非常感谢！

以上是关于不变违规：当元素在 DOM 中时，目标容器不是 DOM 元素的主要内容，如果未能解决你的问题，请参考以下文章

未捕获的不变违规：_registerComponent(...)：目标容器不是 DOM 元素

Meteor+React 错误：未捕获的不变违规：_registerComponent(...)：目标容器不是 DOM 元素

React 13.3 unmountComponentAtNode() 错误：目标容器不是 DOM 元素

在 Stencil Web 组件中进行 React 渲染

测试 React：目标容器不是 DOM 元素

未捕获的错误：_registerComponent(...)：目标容器不是 DOM 元素。(...)