我无法将PreactX组件直接呈现为document.body
我无法将PreactX组件直接呈现为document.body
提问于 2019-07-02 08:21:21
请参阅这个最低限度的例子：
或守则：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>JS
/** @jsx h */
import { h, render } from "preact";
function App() {
return <div className="App">Cool</div>;
}
render(<App />, document.body);呈现的结果如下：
结果
<body>
<div id="root" class="App">Cool</div>
</body>我想保留我的#root dom元素为空，但是PreactX接管了对dom节点的控制，为什么会发生这种情况？
我想直接将我的PreactX组件呈现到document.body中。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-12 22:28:18
Preact基本上是将document.body (<div id="root"></div>)的原始内容与新内容<div className="App">Cool</div>进行区分和合并，给出如下结果：
<div id="root" class="App">Cool</div>
如果进入public/index.html并删除第13行：<div id="root"></div>，您将看到生成的html为now：<div class="App">Cool</div>。
TLDR；您正在将preact安装到document.body，它已经包含了内容，preact是将这些内容与您的'App.js‘组件进行比较和合并。在index.html中清空body标记，您就可以了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56848193
复制相关文章
相似问题
腾讯云开发者
