我无法将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标签,一切就好。