这次给大家带来使用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(){//新建一个p标签并塞进body
this.popup = document.createelement(p);
document.body.appendchild(this.popup);
this._renderlayer();
}
componentdidupdate() {
this._renderlayer();
}
componentwillunmount(){//在组件卸载的时候，保证弹层也被卸载掉
reactdom.unmountcomponentatnode(this.popup);
document.body.removechild(this.popup);
}
_renderlayer(){//将弹层渲染到body下的p标签
reactdom.render(this.props.children, this.popup);
}
render(){
return null;
}
}
总结下就是：
在componentdidmount的时候手动向body内塞一个p标签，然后使用reactdom.render 将组件渲染到这个p标签
当我们想把组件直接渲染到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('p');
this.rootdom = popupinfo.rootdom;
this.rootdom.appendchild(this.popup);
//we can setattribute of the p 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节点的筛选类名
/
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js实现图片在网页中被拖拽
react native组件的生命周期多长
以上就是使用react将组件渲染到指定dom节点的详细内容。