Portal

Raccom

已于 2022-11-14 11:26:44 修改

阅读量302

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-03-07 14:55:31 首次发布

本文链接：https://blog.csdn.net/Raccon_/article/details/123330451

版权

React 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

React Portal允许组件渲染到DOM的不同位置，解决溢出隐藏和z-index问题。例如，用于创建对话框或悬浮框。通过ReactDOM.createPortal，子组件可以渲染到指定DOM节点，同时事件冒泡仍能在React元素树中正常工作。此特性在实现需要跨越父组件限制的UI元素时非常有用。

摘要由CSDN通过智能技术生成

Portal

Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法。

ReactDOM.createPortal(child,container);

第一个参数child是可渲染的react子项，比如元素，字符串或者片段等。第二个参数container是一个DOM元素。

1、用法

普通的组件，子组件的元素将挂载到父组件的DOM节点中。

render() {
  // React 挂载一个div节点，并将子元素渲染在节点中
  return (
    <div>
      {this.props.children}
    </div>
  );
}

有时需要将元素渲染到DOM中的不同位置上去，这是就用到的portal的方法。

render(){
    // 此时React不再创建div节点，而是将子元素渲染到Dom节点上。domNode，是一个有效的任意位置的dom节点。
    return ReactDOM.createPortal(
        this.props.children,
        domNode
    )
}

一个典型的用法就是当父组件的dom元素有 overflow:hidden或者z-inde样式，而你又需要显示的子元素超出父元素的盒子。举例来说，如对话框，悬浮框，和小提示。

2、在protal中的事件冒泡

虽然通过portal渲染的元素在父组件的盒子之外，但是渲染的dom节点仍在React的元素树上，在那个dom元素上的点击事件仍然能在dom树中监听到。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const getDiv = () => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    return div;
};

const withPortal = (WrappedComponent) => {
    class AddPortal extends Component {
        constructor(props) {
            super(props);
            this.el = getDiv();
        }

        componentWillUnmount() {
            document.body.removeChild(this.el);
        }

        render(props) {
            return ReactDOM.createPortal(<WrappedComponent {...props} />, this.el);
        }
    }
    return AddPortal;
};

class Modal extends Component {
    render() {
        return (
            <div>
                <div>amodal content</div>
                <button type="button">Click</button>
            </div>
        );
    }
}

const PortalModal = withPortal(Modal);

class Page extends Component {
    constructor(props) {
        super(props);
        this.state = { clicks: 0 };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(state => ({
            clicks: state.clicks + 1
        }));
    }


    render() {
        return (
            <div onClick={this.handleClick}>
                <h3>ppppppppp</h3>
                <h3>num: {this.state.clicks}</h3>
                <PortalModal />
            </div>
        );
    }
}

export default Page;