ReactJs 0.12 目标容器不是 DOM 元素答案

【问题标题】：ReactJs 0.12 Target container is not a DOM elementReactJs 0.12 目标容器不是 DOM 元素
【发布时间】：2014-12-12 20:12:03
【问题描述】：

我很困惑为什么会在控制台中收到此错误。我已经阅读了所有的说明，据我所知，我这样做是对的。

在我的页面上我有一个

<div id="aisis-writer"></div>

我希望我的 react 元素绑定到哪里。然后我创建了一个不渲染的简单 React 组件：

var AisisWriter = React.createClass({
  getInitialState: function(){},

  componentDidMount: function(){},

  render: function(){
    return null;
  }
});

React.render(
  <AisisWriter />,
  document.getElementById('aisis-writer')
);

非常基础。当我加载页面时，我看到：Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element. 所以我想，好吧，也许我在这里拼错了一些东西，所以在控制台中我这样做了：

document.getElementById('aisis-writer');

我回来了：

<div id="aisis-writer"></div>

所以我完全错过了什么吗？为什么会出现此错误？

【问题讨论】：

代码在您的文档中的什么位置？可能与stackoverflow.com/q/14028959/218196 重复。
React.render 应该在 window.onload 上调用或者将脚本标签和你的反应代码放在 asis-writer dom 元素之后
这是在 Rails 项目中，所以我假设执行此操作的代码的所有 Javascript 代码都加载在标题中。我应该在我的元素之后使用一种方法来加载这个特定的文件吗？
是的，您只能获取对存在元素的引用。

标签： javascript reactjs

【解决方案1】：

我遇到了同样的问题，这是因为脚本是在解析 DOM 之前执行的（也许您将脚本包含在索引头中）。要解决此问题，您可以在脚本包含中使用 defer。

<head>
    ...
    <script src="app.js" defer></script>
    ...
</head>

当页面完成解析时，defer 属性会加载您的脚本，因此即使您将脚本放入索引头中，您也可以确定脚本会找到您的所有元素，因为它们会在那里。

W3Schools defer

更新

标准方法是在正文末尾添加脚本。它们应该在创建 DOM 后加载，因此错误应该消失，因为当您使用 JavaScript 到达 DOM 时，它已经存在。 defer 在浏览器中广泛传播，因此除非您使用的是非常旧的浏览器，否则您应该不会遇到问题。您可以使用defer来安排您的代码。将“依赖项”放在标题中，将“代码”放在正文中似乎更直观。

这里有一个使用defer的参考。

【讨论】：

【解决方案2】：

以下代码尝试查找 ID 为 aisis-writer 的元素，其中显示为 document.getElementById('aisis-writer')，但无法在页面上找到该元素。

React.render(
  <AisisWriter />,
  document.getElementById('aisis-writer')
);

这可能是因为

JavaScript 在<div id="aisis-writer"></div> 行之前执行
或者，您的 ID 可能拼写错误

解决方案：

您可以将React.render 语句放在window.onload 中
或者，确保React.render 仅出现在页面上的<div id="aisis-writer"></div> 之后

【讨论】：