react之弹窗组件的设计和实现

落日映苍穹つ 2022-12-11 15:16 351阅读 0赞

设计思路

弹窗类组件的要求弹窗内容在 A 处声明，却在 B 处展示。 react 中相 当于弹窗内容看起来被render 到⼀个组件⾥⾯去，实际改变的是⽹ ⻚上另⼀处的DOM 结构，这个显然不符合正常逻辑。但是通过使⽤ 框架提供的特定API 创建组件实例并指定挂载⽬标仍可完成任务。

// 常⻅⽤法如下：Dialog在当前组件声明，但是却在body中另⼀个div中显示
    import React, {Component} from "react";
    import Dialog from "../conponents/Dialog";
    
    export default class DialogPage extends Component {
     constructor(props) {
       super(props);
       this.state = {
         showDialog: false
       };
     }
     render() {
       const {showDialog} = this.state;
       return (
         <div>
           <h3>DialogPage</h3>
           <button
              onClick={() =>
                this.setState({
                   showDialog: !showDialog
                })
              }>
              toggle
           </button>
           {showDialog && <Dialog />}
        </div>
      );
     }
    }

具体实现 **: Portal**

传送⻔， react v16 之后出现的 portal 可以实现内容传送功能。

具体范例：

// Diallog.js
    import React, { Component } from "react";
    import { createPortal } from "react-dom";
    
    export default class Dialog extends Component {
     constructor(props) {
       super(props);
       const doc = window.document;
       this.node = doc.createElement("div");
       doc.body.appendChild(this.node);
     }
     componentWillUnmount() {
       window.document.body.removeChild(this.node);
     }
     render() {
       const { hideDialog } = this.props;
       return createPortal(
         <div className="dialog">
           {this.props.children}
           {typeof hideDialog === "function" && (
             <button onClick={hideDialog}>关掉弹窗
             </button>
           )}
        </div>,
        this.node,
       );
     }
    }

1. Dialog 什么都不给⾃⼰画， render 返回⼀个 null 就够了；

2.  它做得事情是通过调⽤ createPortal 把要画的东⻄画在 DOM 树上另⼀个⻆落。

原文：视频笔记