react-插槽(Portals)

最新推荐文章于 2022-12-30 17:00:48 发布

hsany330

最新推荐文章于 2022-12-30 17:00:48 发布

阅读量325

点赞数

原文链接：https://www.jianshu.com/p/fef9b2135512

版权

插槽(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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

hsany330

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-插槽(Portals)

插槽(Portals)能将子节点渲染到父组件的 DOM 层次之外1:用法ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或片段(fragment)。第二个参数（container）则是一个 DOM 元素。render() {// React 不会创建一个新的 div。它把 children 渲染到 domNode 中。// domNode 可以是任何有效的 DOM 节
复制链接

扫一扫