react中modal的用法是什麼

在react中，modal用來覆寫包含根視圖的原生視圖，可以實現遮罩的效果，語法為「」或「Modal.confirm()」。

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

react中modal的用法是什麼

Modal 簡述

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

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

核心功能點提取

##根據Antd Modal 文件提供的介面來實作Modal.

核心實作

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
2)Modal.tsx 中維護相關靜態方法confirm, error, info

1. #夫等。

   // 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;
       }}</modalprops>

接下來就是最關鍵的
2. 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';
           }
       }}

從程式碼可以發現
3. internalModal

   的實作要點：

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

#########在document 上建立一個p container 乘放Modal，透過css display 控制顯示/隱藏，其實也可以使用React Portal.#############可以用一些第三方函式庫例如react-transition-group 來增強Modal 顯示/隱藏的動畫效果。 ############推薦學習：《###react影片教學###》###

以上是react中modal的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！