react中的modal怎么用

這篇文章主要介紹了react中的modal怎么用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react中的modal怎么用文章都會有所收獲，下面我們一起來看看吧。

在react中，modal用于覆蓋包含根視圖的原生視圖，可以實現遮罩的效果，語法為“<Modal visible={this.state.visible} {...props}></Modal>”或者“Modal.confirm()”。

本教程操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react中modal的用法是什么

Modal 簡述

模態對話框。需要用戶處理事務，又不希望跳轉頁面以致打斷工作流程時，可以使用 Modal 在當前頁面正中打開一個浮層，承載相應的操作。

另外當需要一個簡潔的確認框詢問用戶時，可以使用 Modal.confirm() 等語法糖方法。

核心功能點提取

根據 Antd Modal 文檔提供的接口來實現 Modal.

核心實現

Modal 組件的特殊在于它有兩種用法:

1. 通常用法：<Modal visible={this.state.visible} {...props}></Modal>

2. 調用靜態方法： Modal.confirm({ title: '取消后，已編輯的腳本信息將不會保存，請確認是否取消。', okText: '確認取消', cancelText: '暫不取消', onOk() { me.props.onCancel(); } })

我的想法是這兩種調用都在internalModal.tsx中統一維護

順著這個思路， 對于 Modal.tsx 。
1）不會維護 render 方法， 而是在 componentDidMount / componentDidUpdate 生命周期中調用 internalModal.tsx 完成渲染
2）Modal.tsx 中維護相關靜態方法 confirm, error, info 等。

// Modal.tsxexport default class Modal extends React.Component<ModalProps, {}> {
    static propTypes = {
		...
    };

    static confirm(content) {
        const modal = new InternalModal();
        const props = {
            ...Modal.defaultProps,
            title: '提示',
            children: content,
            cancelButton: true,
            okButton: true,
            okButtonText: '確定',
            cancelButtonText: '取消',
            closable: false,
            visible: true,
            onOk() {
                modal.destroy();
            },
            onCancel() {
                modal.destroy();
            }
        };
        modal.render(props);
    }

    private modal;
    constructor(props: ModalProps) {
        super(props);
        this.modal = new InternalModal();
    }

    componentWillUnmount() {
        this.modal.destory();
        this.modal = null;
    }

    componentDidMount() {
        this.modal.render(this.props);
    }

    componentDidUpdate() {
        this.modal.render(this.props);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.visible) {
            this.modal.show();
        } else {
            this.modal.hide();
        }
    }

    render() {
        return null;
    }}

接下來就是最關鍵的 internalModal.tsx :

export default class InternalModal {

    private props;

    render(props) {
        const {...} = this.props;

        this.createContainer();
        const icon = require('../../assets/icon/info.svg') as string;

        const modalDOM = ...;

        ReactDOM.render({modalDOM}, modalContainer,
	        () => {
	            if (visible) {
	                this.show();
	            }
	        });
    }

	...

    createContainer() {
        if (!modalContainer) {
            modalContainer = document.createElement('p');
            document.body.appendChild(modalContainer);
        }
    }

    destroy() {
        if (modalContainer) {
            ReactDOM.unmountComponentAtNode(modalContainer);
        }
    }

    show() {
        if (modalContainer) {
            modalContainer.style.display = 'block';
        }
    }

    hide() {
        if (modalContainer) {
            modalContainer.style.display = 'none';
        }
    }}

從代碼可以發現 internalModal 的實現要點：

1. 作為一個普通 js 類 (并沒有繼承 React.Component) ，提供一個 render 方法，render 中通過ReactDOM.render(element, container[, callback])渲染彈出窗口

2. 在 document 上創建一個 p container 乘放 Modal，通過 css display 控制顯示/隱藏，其實也可以使用 React Portal.

3. 可以用一些第三方庫比如react-transition-group 來增強 Modal 顯示/隱藏的動畫效果。

關于“react中的modal怎么用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react中的modal怎么用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。