Question

首先，there is a similar question to this one。我故意选择了类似的标题，但是这个问题略有不同。

我有一些服务器端渲染的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实际上安装在{{1 }}在DOM元素内，产生以下HTML：

<Article />

现在，我想知道是否有什么方法可以使<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.hydrate代替容器而不是插入容器

0 个答案: