React中的模式对话框-白红宇

在16.x版本之后React提供了Protals功能来解决模式对话框不在Dom根节点导致的一些BUG。除了Protal还有更多的方法去解决这些问题，本文来自David Gilbertson的博客，详细解释了React中模式对话框的一些问题，以及他给出的解决方案，在了解Protals之前阅读这篇内容，能让你更加明白Protal的重要性。

对于React的模式对话框，有很多方法可以实现但是并没有一个绝对正确的方法。这句话怎么理解呢？让我们先看看一个模式对话框的特性：

能够浮现在最上层，阻止用户的其他操作。

能够处理鼠标和键盘事件，例如关闭窗口事件。

接受外部传入一个回调函数，当用户进行某些操作的时候调用他，例如点击“确定”或“取消”按钮。

接受外部参数，可以设定大小、文字、处理器等等。

模式对话框的实现思路

下面的这些图片是常见模式对话框的例子：

React中的模式对话框

这些模式对话框都有一个全局的背景遮罩层、有头部或描述内容、有一些功能按钮、可以随意设定的宽度和高度、位置居中。

在React中有三种方式实现模式对话框：

使用一个常规的组件作为一个模式对话框的包装组件，然后将我们自定义的内容作为子组件传递给模式对话框。例如这个项目：。

将模式对话框放置到HTML结构的顶层，将其设置为 document.body 的子元素。例如：

将模式对话框作为整个组件结构中的顶层组件（根元素的子组件），通过全局的数据来控制他显示或隐藏。

那这三种实现方式有什么问题呢：

第一种方式有定位问题。如果你用这种方式实现模式对话框，你的HTML上下文会影响当前模式对话框的展示效果，所以这种方式很有可能会出现一些意向不到的问题。你真的认为 position: fixed 可以让某个元素相对与浏览器窗口绝对定位吗？请看这个例子：，使用开发人员工具看看 .top-div和 .fixed-div 的样式你就懂了。

第二种方式首先对于单元测试不友好，因为我们不得不把对话框作为body的子元素（或者其他某个真实DOM的子元素）来显示，那么得有浏览器的真实DOM才能看到效果。而且这种方式看起来挺“骇客”的，我们按照单向数据流的思路开发了整套个标准合理的React组件，最后不得不用 ReactDOM.unstable_renderSubtreeIntoContainer() 方法装载一个组件到body元素中，最终可能会导致虚拟DOM与真实DOM不一致或者服务端渲染遇到问题。‘unstable’前缀的含义是React官方明确告诉你：这玩意有坑，踩上了别怪我。详情请看React官方对unstable_renderSubtreeIntoContainer的说明。

第三种方式在笔者看来是最合理最优秀的，下面就谈谈这种实现方式的思路。

全局数据流控制模式对话框

实际上就是用flux或redux的方式去控制对话框显示或关闭。如果之前用过flux之类思路的工具，后面的内容分分钟就理解了。

先看下模式对话框的组件结构：

React中的模式对话框

App.jsx——整个工程的根组件，通常不会在这里有什么特殊的处理。它首先会渲染其他所有的顶层组件，然后再最后渲染模式对话框组件。

ModalConductor.jsx——模式框的管理组件，由他来控制当前应该渲染哪个模式框。

SignIn.jsx、EditScreen.jsx等组件——具体样式的模式对话框。

在这些组件之外，还有store来存储全局模式对话框的相关数据。store.currentModal 用于指示显示哪个模式框的字符串，如果为 null 则表示没有任何模式框要显示，所以整个工程一次只显示一个模式框。

下面我们看看组件实现过程。

首先我们在任何位置都可以修改 store 。当我们通过某种方式将 store.currentModal 的值修改为 signIn 后，ModalConductor 会触发重新渲染并在内部判断要渲染 SignIn 组件。

这是 ModalConductor 的示意代码，通过switch语句判断要显示的组件：

import React from 'react';import ExportDataModal from './ExportDataModal.jsx';import SignInModal from './SignInModal.jsx';import FeedbackModal from './FeedbackModal.jsx';import BoxDetailsModal from './BoxDetailsModal.jsx';const ModalConductor = props => {  switch (props.currentModal) {    case 'EXPORT_DATA':      return 
    ;    case 'SOCIAL_SIGN_IN':      return 
    ;    case 'FEEDBACK':      return 
    ;    case 'EDIT_BOX':      return 
    ;    default:      return null;  }};export default ModalConductor;

下面模式对话框组件的代码结构：

import React from 'react';import ModalWrapper from '../ModalWrapper.jsx';const SignIn = props => {  const signIn = provider => {    props.hideModal();    props.signIn(provider);  };  return (    
          
     Choose your flavor
      
           
           
         
      );};export default SignIn;

他内部使用了一个名为 ModalWrapper 的包装组件，用来显示模式对话框的效果，可以直接使用或者自己实现，如下是一个模式框的包装组件：

import React from 'react';const {PropTypes} = React;const ModalWrapper = props => {  const handleBackgroundClick = e => {    if (e.target === e.currentTarget) props.hideModal();  };  const onOk = () => {    props.onOk();    props.hideModal();  };  const okButton = props.showOk    ? (          ) : null;  return (    
          
             
      {props.title}
        
            
     
      {props.children}      {okButton}    
    
  );};ModalWrapper.defaultProps = {  title: '',  showOk: true,  okText: 'OK',  okDisabled: false,  width: 400,  onOk: () => {}};export default ModalWrapper;