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

设计思路

 

弹窗类组件的要求弹窗内容在 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 树上另⼀个⻆落。

 

原文：视频笔记