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

时间：2019-07-02 08:21:21

标签： javascript html reactjs preact

请参见以下最小示例：

Edit cool-meadow-hiv9z

或代码：

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 个答案:

答案 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标签，一切就好。

相关问题
最新问题