gpt4 book ai didi

javascript - ReactJs 0.12 目标容器不是 DOM 元素

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:46:18 25 4
gpt4 key购买 nike

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

在我的页面上我有一个

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

我希望将我的 react 元素绑定(bind)到哪里。然后,我创建了一个不呈现任何内容的简单 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>

那么我是否完全遗漏了什么?为什么会出现此错误?

最佳答案

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

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

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

W3Schools defer

更新

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

这里有一个使用位置的引用defer .

关于javascript - ReactJs 0.12 目标容器不是 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27451400/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com