ReactDOM.render 找不到我的 div 元素

Question

我收到了经典错误：

路由期间捕获的错误：错误：目标容器不是 DOM 元素。

在这行代码上：

ReactDOM.render(<GamerTag game={this.model} />, document.getElementById("gameDescription"));

我在 Backbone 视图中渲染那个 React dom。

gameDescription是我的视图模板中一个 div 的 ID，React 组件在该模板中被渲染。

就像大家说的，把你的主js文件放在你的主索引文件的底部。

我做到了，我把<script src="~/dist/app.js"></script>放在结束</body>标记之前。

但我仍然得到错误。

我知道 div 存在，因为当我在浏览器中查看源代码时，我看到了它。

另外，如果我在 ReactDOM.render 中使用document.body.appendChild(document.createElement("div")) ，它工作得很好......除了它在我的页面底部我没有希望它成为。

所以除了我自己之外，我很可怕，我还能尝试什么其他选择或事情？ 我没有线索了。

谢谢！

Answer 1

当 react 尝试渲染您的组件时，您的元素不存在。
我猜这是因为在 react 尝试渲染组件时没有渲染您的主干视图。

一个简单的检查方法是放置一个debugger; 在你的ReactDOM.render()调用之前在你的代码中声明，在停止时，打开你的 DevTools，查看 DOM 并搜索你的元素。
或者只是打开控制台并运行document.getElementById('gameDescription')看看它是否真的存在。