如何使用自定义DOM节点从react组件内渲染到

Question

我有以下问题：

我想写jsx类似的代码

<div className="my-section">
   <Window>
       <div>Window content</div>
   </Window>
</div>
<div className="window-container">
</div>

我的react内容中的某处，但我希望该窗口与其他窗口一起以特殊的DOM元素呈现，例如

<div class="my-section"></div>
<div class="window-container">
    <div class="window">
        <div>Window Content</div>
    </div>
</div>

为了透明地执行此操作，我需要告诉组件从组件内部渲染到特殊的DOM节点。 有没有办法做到这一点？ 如果没有，我该如何在React完成我要寻找的功能？

Answer 1

您正在寻找特殊的this.props.children列表。

创建React组件实例时，您可以在开始和结束标记之间包含其他React组件或JavaScript表达式，如下所示：

 <Parent><Child /></Parent> 

家长可以通过访问特殊的this.props.children属性来阅读其孩子。

这将使您能够在元素内定义子元素，然后将它们插入任意点以进行渲染。

render() {
  return (
    <div className="window container">
      <div className="window">{this.props.children}</div>
      <div className="window"></div>
      ...
    </div>
  );
}