插槽(Portals)能将子节点渲染到父组件的 DOM 层次之外
1:用法
ReactDOM.createPortal(child, container)
第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 片段(fragment)。第二个参数(container)则是一个 DOM 元素。
render() {
// React 不 会创建一个新的 div。 它把 children 渲染到domNode
中。
//domNode
可以是任何有效的 DOM 节点,不管它在 DOM 中的位置。
return ReactDOM.createPortal(
this.props.children,
domNode,
);
}
对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-index 样式,但你需要子组件能够在视觉上 “跳出(break out)” 其容器。例如,对话框以及提示框。
2、实例
<body>
<div id="app-root"></div>
<div id="mask-root"></div>
</body>
#modal-root {position: relative;z-index: 999;}
.modal {
color:#fff;background-color: rgba(0,0,0,1);
position: fixed;top: 0;left: 0;
height: 100%;width: 100%;display: flex;
align-items: center;justify-content: center;
}
const appRoot = document.getElementById('app-root');
const maskRoot = document.getElementById('mask-root');
class Mask extends React.Component{
constructor(props){
super(props);
this.el = document.createElement('div');
}
componentDidMount(){
maskRoot.appendChild(this.el);
}
componentWillUnmount(){
maskRoot.removeChild(this.el);
}
render(){
return ReactDOM.createPortal(
this.props.children,
this.el
);
}
}
class App extends React.Component{
constructor(props){
super(props);
this.state = {
showMask:false
}
this.handler = this.handler.bind(this);
}
handler(){
let showMask = this.state.showMask;
this.setState({showMask:!showMask});
}
render(){
let showMask = this.state.showMask;
let mask = showMask ?
<Mask>
<div className='modal'>
adadsadadad
<button onClick={this.handler}>hidden</button>
</div>
</Mask>
: null;
return (
<div>
This div has overflow: hidden.
<button onClick={this.handler}>show</button>
{mask}
</div>
);
}
}
ReactDOM.render(<App/>,appRoot);
3、事件冒泡
虽然一个portal可以插入到任何一个存在dom树中,但是通过Portal节点插入到其他dom中的节点,跟其他的React普通的子节点表现相同。在父节点下,通过Portal插入的子节点也可以共享context。
对于事件冒泡,从Portal节点中触发的事件,虽然可能改变了节点所处的位置,但是在HTML结构中的父包含节点是可以拿到这个事件的。
<html>
<body>
<div id="app-root"></div>
<div id="modal-root"></div>
</body>
</html>
在上面的HTML结构中,通过Portal, 在Button真实位置是包含在“modal-root”下,但是因为在HTML的结构中Button所在的父节点的HTML结构是包含“app-root”中的,因此在“modal-root”中出发的事件,也可以冒泡到“app-root”中。
4:补充
在实际使用过程中,通过Portal,我们可以在组件渲染的任何时候向任何地方插入组件,需要确保的是被插入的容器是真实的DOM,即可以用document.getElementByXX 获取到的DOM。
作者:Maco_wang
链接:https://www.jianshu.com/p/fef9b2135512
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。