React将组件渲染到指定DOM节点

React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结构，如同一个简单的函数，就可以得到一个可以复用的react组件。但是有时候还是会有些限制的，尤其是他的API中，不能控制组件所应该渲染到的DOM节点，这就让一些弹层组件很难控制。当父元素设置为overflow：hidden 的时候，问题就会出现了。

例如就像下面的这样：

我们实际期待的效果是这样的：

幸运的是，虽然不是很明显，但有一个相当优雅的方式来绕过这个问题。我们学到的第一个react函数是render 方法，他的函数签名是这样的:

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

通常情况下我们使用该方法将整个应用渲染到一个DOM节点中。好消息是该方法并不仅仅局限于此。我们可以在一个组件中，使用ReactDom.render 方法将另一个组件渲染到一个指定的DOM 元素中。作为一个组件的render 方法，其必须是纯净的（例如：不能改变state或者与DOM交互）.所以我们需要在componentDidUpdate 或者 componentDidMount 中调用ReactDom.render 方法。

另外我们需要确保在父元素被卸载的时候，改组件也要被卸载掉.

整理下，我们得到下面的一个组件：

import React,{Component} from 'react';
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
    constructor(p){
        super();
    }
    componentDidMount(){//新建一个div标签并塞进body
     this.popup = document.createElement("div");
     document.body.appendChild(this.popup);
     this._renderLayer();
    }
    componentDidUpdate() {
        this._renderLayer();
    }
    componentWillUnmount(){//在组件卸载的时候，保证弹层也被卸载掉
        ReactDom.unmountComponentAtNode(this.popup);
        document.body.removeChild(this.popup);
    }
    _renderLayer(){//将弹层渲染到body下的div标签
        ReactDom.render(this.props.children, this.popup);
    }
    render(){
        return null;
    }
}

总结下就是：

在componentDidMount的时候手动向body内塞一个div标签，然后使用ReactDom.render 将组件渲染到这个div标签

当我们想把组件直接渲染到body上的时候，只需要在该组件的外面包一层RenderInBody 就可以了.

export default class Dialog extends Component{
    render(){
        return {
            <RenderInBody>i am a dialog render to body</RenderInBody>
        }
    }
}

---

译者增加：

将以上组件改造一下，我们就可以向指定的dom节点中渲染和卸载组件，并加上位置控制，如下：

//此组件用于在body内渲染弹层
import React,{Component} from 'react'
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
    constructor(p){
        super(p);
    }
    componentDidMount(){
        /**
        popupInfo={
            rootDom:***,//接收弹层组件的DOM节点，如document.body
            left:***,//相对位置
            top:***//位置信息
        }
        */
        let {popupInfo} = this.props; 
        this.popup = document.createElement('div');
        this.rootDom = popupInfo.rootDom;        
        this.rootDom.appendChild(this.popup);
        //we can setAttribute of the div only in this way
        this.popup.style.position='absolute';
        this.popup.style.left=popupInfo.left+'px';
        this.popup.style.top=popupInfo.top+'px';
        this._renderLayer()
    }
    componentDidUpdate() {
        this._renderLayer();
    }
    componentWillUnmount(){
        this.rootDom.removeChild(this.popup);
    }
    _renderLayer(){
        ReactDom.render(this.props.children, this.popup);
    }
    render(){
        return null;
    }
}

注：位置获取和根结点判断函数

export default (dom,classFilters)=> {
    let left = dom.offsetLeft,
        top = dom.offsetTop + dom.scrollTop,
        current = dom.offsetParent,
        rootDom = accessBodyElement(dom);//默认是body
    while (current !=null ) {
        left += current.offsetLeft;
        top += current.offsetTop;
        current = current.offsetParent;
        if (current && current.matches(classFilters)) {
            rootDom = current;
            break;
        }
    }
    return { left: left, top: top ,rootDom:rootDom};
}
/***
1. dom:为响应弹层的dom节点，或者到该dom的位置后，可以做位置的微调，让弹层位置更佳合适
*
2. classFilters:需要接收弹层组件的DOM节点的筛选类名
/

原文地址