React中的模式对话框

全文共 1434 个字

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

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

  1. 能够浮现在最上层,阻止用户的其他操作。
  2. 能够处理鼠标和键盘事件,例如关闭窗口事件。
  3. 接受外部传入一个回调函数,当用户进行某些操作的时候调用他,例如点击“确定”或“取消”按钮。
  4. 接受外部参数,可以设定大小、文字、处理器等等。

模式对话框的实现思路

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

React中的模式对话框

React中的模式对话框

React中的模式对话框

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

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

  1. 使用一个常规的组件作为一个模式对话框的包装组件,然后将我们自定义的内容作为子组件传递给模式对话框。例如这个项目:https://github.com/reactjs/react-modal
  2. 将模式对话框放置到HTML结构的顶层,将其设置为 document.body 的子元素。例如:https://github.com/tajo/react-portal
  3. 将模式对话框作为整个组件结构中的顶层组件(根元素的子组件),通过全局的数据来控制他显示或隐藏。

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

第一种方式有定位问题。如果你用这种方式实现模式对话框,你的HTML上下文会影响当前模式对话框的展示效果,所以这种方式很有可能会出现一些意向不到的问题。你真的认为 position: fixed 可以让某个元素相对与浏览器窗口绝对定位吗?请看这个例子: https://output.jsbin.com/fepime/,使用开发人员工具看看 .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 <ExportDataModal {...props}/>;

    case 'SOCIAL_SIGN_IN':
      return <SignInModal {...props}/>;

    case 'FEEDBACK':
      return <FeedbackModal {...props}/>;

    case 'EDIT_BOX':
      return <BoxDetailsModal {...props}/>;

    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 (
    <ModalWrapper
      {...props}
      title="Sign in"
      width={400}
      showOk={false}
    >
      <p>Choose your flavor</p>
      <button onClick={() => signIn('facebook')}>Facebook</button>
      <button onClick={() => signIn('google')}>Google</button>
      <button onClick={() => signIn('twitter')}>Twitter</button>
    </ModalWrapper>
  );
};

export default SignIn;

他内部使用了一个名为 ModalWrapper 的包装组件,用来显示模式对话框的效果,可以直接使用https://github.com/reactjs/react-modal或者自己实现,如下是一个模式框的包装组件:

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
    ? (
      <button
        onClick={onOk}
        disabled={props.okDisabled}
      >
        {props.okText}
      </button>
    ) : null;

  return (
    <div onClick={handleBackgroundClick}>
      <header>
        <h1>{props.title}</h1>

        <button onClick={props.hideModal}>Close</button>
      </header>

      {props.children}

      {okButton}
    </div>
  );
};

ModalWrapper.defaultProps = {
  title: '',
  showOk: true,
  okText: 'OK',
  okDisabled: false,
  width: 400,
  onOk: () => {}
};

export default ModalWrapper;