时间戳

首页 > 解决方案 > 如何在反应中扩展渲染 DOM

javascript - 如何在反应中扩展渲染 DOM

问题描述

假设我有一个从父类扩展的子类。父类呈现

<div id="container" class="style-scope ">
    .....
    bunch of DOM.
</div>

在子类中，如何在没有复制粘贴的情况下呈现如下示例中的 HTML DOM？

<div id="container" class="style-scope ">
    .....
    bunch of DOM.
    <div id="childContainer">
    </div>
</div>

<div id="container" class="style-scope ">
    .....
    bunch of DOM.
</div>
<div id="childContainer">
</div>

标签： javascriptreactjsjsx

解决方案

让父母渲染它的孩子。

render () {
  return (
  <>
    <div id="container" className="style-scope ">
        .....
        bunch of DOM.
    </div>
    { this.props.children }
  </>
  )
}

然后你可以这样做：

<Parent>
  <div id=“childContainer”&gt;...</div>
</Parent>

要得到：

    <div id="container" class="style-scope ">
        .....
        bunch of DOM.
    </div>
    <div id=“childContainer”&gt;...</div>

推荐阅读