这次给大家带来使用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 { i am a dialog render to body } }}
登录后复制
译者增加：
将以上组件改造一下，我们就可以向指定的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节点的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2770955.html
