如何在反应中扩展渲染 DOM

Question

假设我有一个孩子 class 从父 class 延伸。 父 class 渲染

<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>

Answer 1

让父母渲染它的孩子。

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

然后你可以这样做：

<Parent>
  <div id=“childContainer”>...</div>
</Parent>

要得到：

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