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

【问题标题】：I can't render PreactX component directly into 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 中。

【问题讨论】：

标签： javascript html reactjs preact

【解决方案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 标签就可以了。

【讨论】：