modal 组件的常规用法

常用的UI库中都提供有modal组件， 比如 AntD, MUI Modal, MUI Dialogs。
MUI 的设计跟 AntD 的不太一样，个人感觉是 AntD 更多是从业务开发角度封装各种功能，简单直接；而 MUI 组件粒度更细，需要开发者自己创造各种组件；

就拿 modal 来说，AntD 的直接用就可以，但是：如果有些变态的需求，你可能就不好搞了。不过幸好变态不多，基本上是够你用了。
MUI 不一样，modal 只有基本的功能，Dialogs 才类似于AntD的Modal 组件。MUI 基于 modal 还有其余几个扩展组件，如抽屉Drawer，菜单Menu 等都基于 modal 组件开发。
所以学习组件设计，还是用MUI更好些，思路更清晰。

有点扯远了，圆归正转。 如下场景：
在页面 pageX 上有个 icon, 点击后需要弹个说明文档，但这个文档内容较长。就想把文档的内容专门放一个组件A，同时开发一个modal组件B来集成 文档内容组件A。再到pageX中引入 modal组件B。

这种情况实际开发非常常见。上代码：

DocDescModal.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

import { Modal, Button } from 'antd';
import DocDesc from './DocDesc';

const DocDescModal = (props) => {
    const { onClose, isOpen, ...other } = props;

    const handleClose = () => {
        onClose();
    };

    const handleOk = () => {
        onClose();
    };

    return (
        <Modal
            title="doc title"
            visible={isOpen}
            onCancel={handleClose}
            footer={[
                <Button type="primary" onClick={handleClose}>
                    关闭
                </Button>,
            ]}
        >
            <CustomerLevelDesc />
        </Modal>
    );
};

DocDescModal.propTypes = {
    onClose: PropTypes.func.isRequired,
    isOpen: PropTypes.bool.isRequired,
};

export default DocDescModal;

DocDescModal 必填两个参数，一个是 onClose ， 一个isOpen. 这里根据你实际业务要求改就是了，可以控制modal各种弹出前，弹出后等各种操作。否否可见的状态完全由外部控制，这里只需接收即可以。

DocDesc.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Typography } from 'antd';
const { Paragraph, Text, Title } = Typography;

const styles = {
    lineHead: {
        textIndent: '2em',
    },
};
const DocDesc = () => {
    return (
        <>
            <Title level={4}>1、GitHub 镜像访问</Title>
            <Paragraph style={styles.lineHead} ellipsis={false}>
                这里提供两个最常用的镜像地址， https://github.com.cnpmjs.org， https://hub.fastgit.org也就是说上面的镜像就是一个克隆版的 GitHub，你可以访问上面的镜像网站，网站的内容跟 GitHub 是完整同步的镜像，然后在这个网站里面进行下载克隆等操作。
            </Paragraph>

            <Paragraph style={styles.lineHead}>
                也就是说上面的镜像就是一个克隆版的 GitHub，你可以访问上面的镜像网站，网站的内容跟 GitHub 是完整同步的镜像，然后在这个网站里面进行下载克隆等操作。
            </Paragraph>     
            <Paragraph style={styles.lineHead}>
                .......
            </Paragraph>  
        </>
    );
};

export default DocDesc;

这里就真正展示的信息。此处并无业务交互，内容较多，属于纯静态展示，所以单独分出来维护。

调用代码：

    onClickQuestionIcon() {
        this.setState({
            isCusLevelModalVisible: true,
        });
    }
    handleQuestionClose() {
        this.setState({
            isCusLevelModalVisible: false,
        });
    }

    render(){
        ...
        <span onClick={(_) => this.openModal()}>
            <QuestionCircleFilled
                style={{ color: '#e9e9e9' }}
            />
        </span>
        <DocDescModal
            isOpen={this.state.isOpen}
            onClose={(_) => this.handleQuestionClose()}
        />
      ..
    }