Rendering React components to the document body

React一个比较好用的功能是其简单的API，一个组件可以简单到一个return了组件结构的render函数。除了一个简单的函数之外，我们还有了一段有用且可复用的代码片段。

问题

不过有时候可能会受到限制。

特别是，实际上这个API返回的是一个没有限制dom挂载在何处的组件，这就使得一些popup组件比较困难去实现。如果父元素限制了oerflow为hidden。就像下面这个例子一样



实际上我们想要的是这样的：

解决

幸运的是有一种相当优雅的方式来达到目的，尽管该方式并不太常见。

作为每个人最早学习到的React方法之一，React.render大概如下：

ReactComponent render(
  ReactElement element,
  DOMElement container,
  [function callback]
)

通常我们使用其来将整个应用挂载到一个DOM元素下面。令人愉悦的是，其不仅仅局限于此，实际上我们可以在一个组件中通过React.render将另一个组件挂载到完全不同的DOM节点。作为组件的render函数其本身必须保持纯净(不能改变state或者和dom进行交互) ，否则的话我们应该在componentDidUpdate或者componentDidMount里面进行操作。另外我们需要确保当其父组件卸载的时，所有已经被渲染的组件可以同样正确的被卸载。

兼顾以上几点，我们可以构建一个解决相关问题的组件。

/**
 * 注：该文章较早，与dom相关的方法已经被拆分到ReactDom中
 */
var RenderInBody = React.createClass({

  componentDidMount: function() {
    // 创建待弹出元素的挂载节点
    this.popup = document.createElement("div");
    // 添加至document.body
    document.body.appendChild(this.popup);
    this._renderLayer();
  },

  componentDidUpdate: function() {
    // 更新时
    this._renderLayer();
  },

  componentWillUnmount: function() {
    // 从挂载节点上清除popup元素
    // (React元素使用该方法，清除的不仅是dom还有state和事件)
    React.unmountComponentAtNode(this.popup);
    // 移除挂载节点
    document.body.removeChild(this.popup);
  },

  _renderLayer: function() {
    // 将children挂载到 popup节点
    React.render(this.props.children, this.popup);
  }

  render: function() {
    // 渲染一个占位符。
    return React.DOM.div(this.props);
  }

});

然后无论何时我们想要将父组件的dom转换到document.body上时，需要做的只是将我们组件的输出包括在RenderInBody组件里，像下面这样就行了：

var Dialog = React.createClass({
  render: function() {
    // 弹框组件
    var dialogPopup = <DialogPopup {...this.props} />;
    // 包括该组件
    return (
      <RenderInBody>{dialogPopup}</RenderInBody>
    );
  }
});

结束语

原文地址

Rendering React components to the document body

本文翻自Rendering React components to the document body这就是所谓的render to body模式.

对于那些popup即弹出层组件，如果将其直接挂载在父元素下面，可能会存在被父元素影响的可能。

为了解决这样的问题，作者提供了一种思路，既然可能会受直接父元素影响，那么直接跨过去，挂载到body上不就解决这个问题了。

这就是本文的用意所在。

感谢原作者，学习到了一种更优雅的处理方式，原本自己写的Dialog之类的组件，确实是挂到直接父元素下面，即写在哪出现在哪，很容易受到其他元素影响。

好文共赏，与诸君共勉。