React如何将组件渲染到指定如何将组件渲染到指定DOM节点详解节点详解
主要给大家介绍了关于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>
}
}
}
译者增加：译者增加：
资源评论
