我无法将 PreactX 组件直接渲染到 document.body

Question

请看这个最小的例子：

或代码：

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。

Answer 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 标签就可以了。

我无法将 PreactX 组件直接渲染到 document.body

I can't render PreactX component directly into document.body

html

javascript

reactjs

preact

HTML

JS

结果