React如何将组件渲染到指定DOM节点详解

网友投稿 1142 2023-04-07


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 {

i am a dialog render to body

}

}

}

译者增加:

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

//此组件用于在body内渲染弹层

import React,{Component} from 'react'

import ReactDom from 'react-dom';

export dhttp://efault 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节点的筛选类名

/

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Vue 多层组件嵌套二种实现方式(测试实例)
下一篇:模拟Mybatis的实现方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~