react组件之Portals–组件跳出原DOM结构

时间:2020-8-22 作者:admin

能力:将子节点渲染到存在于父组件以外的DOM节点

语法ReactDOM.createPortal(child, container)

参数
child:任何可渲染的React子元素
container:一个DOM元素(你想要渲染到的目标容器)

demo

render() {
    return ReactDOM.createPortal(
        this.props.children,
        domNode
    );
}

应用场景
当父组件有overflow: hiddenz-index样式,而你需要子组件在视觉上跳出容器时。【对话框、悬浮卡及提示框等】

事件冒泡:一个从protal内部触发的事件会一直冒泡到react树的祖
先,如以下DOM结构中,#app-root中的Parent组件可以捕获到从兄弟节点#modal-root冒泡上来的事件。

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

class Modal extends React.Component {
    constructor(props) {
        super(props);
        this.el=document.createElement('div');
    }
    componentDidMount() {
        modalRoot.appendChild(this.el);
    }
    componentWillUnmount() {
        modalRoot.removeChild(this.el);
    }
    render() {
        ReactDOM.createPortal(
            this.props.child,
            this.el
        );
    }
}
class Parent extends React.Component {
    render() {
        <Modal>
            <button>click</button>
        </Modal>
    }
}
ReactDOM.render(<Parent />, appRoot);
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。