1，介紹

• 該組件實現了模態框的一些效果。
• 這是react-modal官網的配置參數。

模態框的手動實現，并不算太難，這個組件用著還不錯。

2，配置參數介紹

import React, { Component } from 'react'; import Modal from 'react-modal' import './App.css';class App extends Component {constructor () {super();this.state = {showModal: false // 用于設置模態框的顯示隱藏};}openModal = () => {this.setState({ showModal: true });}closeModal = () => {this.setState({ showModal: false });}// 模態框打開后，執行的函數handleAfterOpenFunc = () => {console.log('open~')}// 該函數，下面會有介紹handleAfterCloseFunc = () => {console.log('close~')}// 用于測試獲取的DOM節點openRef = () => {console.log(this.overlayRef)console.log(this.contentRef)}// 指定模態框的父級getParent = () => {return document.querySelector('#App');}/** react-modal最終生成的DOM默認是作為body的子元素。* 以此例來說，最終位置* <div className="App"><div onClick={this.toggle}>點我</div></div>Modal單獨生成的DOM（位置可變，下面有說）<div portal>...</div>** Modal單獨生成的DOM，4層div* |div Portal 沒有默認樣式** |div overlay 有默認的內聯樣式* position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;background-color: rgba(255, 255, 255, 0.75);** |div content 有默認的內聯樣式* 絕對定位等一大推** |div 指<Modal></Model>標簽中包含的自定義元素* */render() {return (<div id="App"><button onClick={this.openModal}>打開模態框</button><button onClick={this.openRef}>測試獲取DOM節點</button><ModalisOpen={this.state.showModal} // modal容器是否顯示overlayClassName="overlay" // 指定div overlay的classname。（可覆蓋默認樣式）className="content" // 指定div content的classname。（可覆蓋默認樣式）style={{ overlay: {}, content: {} }} // div overlay和content的樣式，也可以直接在這里指定。onAfterOpen={this.handleAfterOpenFunc} // 在模態框打開后，執行的函數// 當請求關閉模態框時，執行的函數！// （模態框不一定會關閉，因為是否關閉取決于isOpen特性，如果在當前函數中，改變了isOpen:false，才會關閉）// 只有兩種情況，才會執行目標函數。// 1，當shouldCloseOnOverlayClick為true時，在div overlay上點擊，會觸發// 2，當shouldCloseOnEsc為true時，并且選中了div content// 也就是說，如果shouldFocusAfterRender也為true，按esc鍵就會觸發。// 或者，shouldFocusAfterRender為false時，手動選中div content，按esc鍵就會觸發。onRequestClose={this.handleAfterCloseFunc}closeTimeoutMS={1000} // 指定，在發出關閉命令后，模態框延遲關閉的時間，默認0shouldCloseOnOverlayClick={true} // 指定在div overlay上點擊，是否關閉模態框，默認trueshouldFocusAfterRender={false} //指定模態框出現后，是否被默認選中，默認trueshouldCloseOnEsc={true} // 指定按esc鍵，是否關閉模態框，默認true（要選中div content，才有效）shouldReturnFocusAfterClose={false} // 指定是否應將焦點恢復到，顯示前具有焦點的元素，默認trueoverlayRef={node => this.overlayRef = node} // 可以獲取div overlay的整個DOM節點contentRef={node => this.contentRef = node} // 可以獲取div content的整個DOM節點parentSelector={this.getParent} // 配合指定的方法，指定"Modal單獨生成的DOM"的父級元素，該demo中，指定到了div App中ariaHideApp={false} //如果沒有添加到某個DOM節點中，就會顯示警告，為了不顯示警告，設置為false，默認true。// portalClassName="protal" // 指定div Portal的classname（因為沒有默認樣式，所以一般不用指定）。// contentLabel="一個demo" // 顯示在div content的自定義屬性:aria-label="通告給屏幕的內容"。><button onClick={this.closeModal}>關閉模態框</button></Modal></div>);} }export default App; 復制代碼

• 這是css

一般來說，這兩個div應該是重疊在一起顯示的，這里設置的樣式，將其分開，是為了測試演示效果。

.overlay {position: fixed;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 300px;height: 300px;border: 5px solid silver;animation: fade 2s; } .content {position: absolute;width: 50%;height: 50%;border: 5px solid salmon;animation: fade 2s; } /* * 這里，我自己指定了一個過渡動畫。 */ @keyframes fade {from {opacity: 0;}to {opacity: 1;} } 復制代碼

以上，就是整體的配置參數的介紹，希望對大家有幫助。

轉載于:https://juejin.im/post/5b34e41351882574dc41e688

總結

以上是生活随笔為你收集整理的详细介绍React模态框组件react-modal的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。