Я не могу отобразить компонент PreactX непосредственно в document.body - PullRequest
Новая
       22

Я не могу отобразить компонент PreactX непосредственно в document.body

1 голос
/ 02 июля 2019

Пожалуйста, посмотрите этот минимальный пример:

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 пустым, но PreactX перехватит контроль над этим.dom node, почему это происходит?

Я хотел бы напрямую отобразить мой компонент PreactX в document.body.

1 Ответ

1 голос
/ 13 июля 2019

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.Очистите тег body в index.html, и все в порядке.

...