前端之家收集整理的这篇文章主要介绍了
React如何将组件渲染到指定DOM节点详解,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
众所周知React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结构,如同一个简单的函数,就可以得到一个可以复用的react组件。但是有时候还是会有些限制的,尤其是他的API中,不能控制组件所应该渲染到的DOM节点,这就让一些弹层组件很难控制。当父元素设置为overflow:hidden
的时候,问题就会出现了。
例如就像下面的这样:
我们实际期待的效果是这样的:
幸运的是,虽然不是很明显,但有一个相当优雅的方式来绕过这个问题。我们学到的第一个react函数是render 方法,他的函数签名是这样的:
通常情况下我们使用该方法将整个应用渲染到一个DOM节点中。好消息是该方法并不仅仅局限于此。我们可以在一个组件中,使用ReactDom.render
方法将另一个组件渲染到一个指定的DOM 元素中。作为一个组件的render 方法,其必须是纯净的(例如:不能改变state或者与DOM交互).所以我们需要在componentDidUpdate 或者 componentDidMount 中调用ReactDom.render
方法。
另外我们需要确保在父元素被卸载的时候,改组件也要被卸载掉.
整理下,我们得到下面的一个组件:
标签并塞进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 就可以了.
i am a dialog render to body
}
}
}
将以上组件改造一下,我们就可以向指定的dom节点中渲染和卸载组件,并加上位置控制,如下:
注:位置获取和根结点判断函数
{
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节点的筛选类名
/
nofollow" target="_blank" href="http://jamesknelson.com/rendering-react-components-to-the-document-body/">原文地址
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。
原文链接:https://www.f2er.com/js/36573.html