请参见以下最小示例:
或代码:
<!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>
/** @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中。
答案 0 :(得分:1)
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现在是:<div class="App">Cool</div>
。
TLDR;您正在将preact安装到document.body
上,该内容已经有内容,并且preact正在将这些内容与“ App.js”组件进行比较和合并。清空index.html中的body标签,一切就好。