1

首先，有一个与此类似的问题。我故意选择了一个类似的标题，但这个问题略有不同。

我有一些服务器端渲染的 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 使用该容器而不是插入其中。

4

0 回答 0