ReactDOM.hydrate заменить контейнер вместо вставки в - PullRequest
Новая
       38

ReactDOM.hydrate заменить контейнер вместо вставки в

1 голос
/ 10 апреля 2019

Прежде всего, есть аналогичный вопрос к этому .Я специально выбрал похожий заголовок, но этот вопрос немного отличается.

У меня есть какой-то серверный код React.Это дает мне HTML примерно так: 

<main>
  <article>
    <h2>Lorem ipsum</h2>
    <p>dolor sit amet</p>
  </article>
  <article>
    <h2>Lorem ipsum</h2>
    <p>dolor sit amet</p>
  </article>
  <article>
    <h2>Lorem ipsum</h2>
    <p>dolor sit amet</p>
  </article>
</main>

В настоящее время я использую частичную гидратацию, т.е.вместо того, чтобы на моей странице было установлено одно большое приложение React, которое монтируется в каком-либо корневом элементе, я лишь увлажняю части страницы соответствующими компонентами.

Это означает, что у меня есть <Article> компонент, подобный этому 

function Article() => (
  <article>
    <h2>Lorem ipsum</h2>
    <p>dolor sit amet</p>
  </article>
)

То, что я монтирую в первой статье, т. Е. 

const container = document.querySelector('main > article:first-child');
ReactDOM.hydrate(<Article />, container);

Я надеялся, что это увлажнит первый <article> элемент и оставит остальное в покое, что работает, кроме использованияи увлажнение элемента <article> ReactDOM фактически монтируется внутри <Article /> внутри элемента DOM, что приводит к следующему HTML: 

<main>

  <article>
    <article>
      <h2>Lorem ipsum</h2>
      <p>dolor sit amet</p>
    </article>
  </article>

  ^ -- <article> inside <article>, not cool

  <article>
    <h2>Lorem ipsum</h2>
    <p>dolor sit amet</p>
  </article>
  <article>
    <h2>Lorem ipsum</h2>
    <p>dolor sit amet</p>
  </article>
</main>

Теперь мне интересно, есть ли способ сделать ReactDOM используйте этот контейнер вместо того, чтобы вставлять в него.

...