使用React手寫一個(gè)對(duì)話框或模態(tài)框的方法示例
更新時(shí)間：2019年04月25日 09:37:05 作者：蘇溪云
這篇文章主要介紹了使用React手寫一個(gè)對(duì)話框或模態(tài)框的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
打算用React寫對(duì)話框已經(jīng)很長一段時(shí)間，現(xiàn)在是時(shí)候兌現(xiàn)承諾了。實(shí)際上，寫起來相當(dāng)簡單。
核心在于使用React的接口React.createPortal(element, domContainer)。該接口將element渲染后的DOM節(jié)點(diǎn)嵌入domContainer(通常是document.body)，并保證只嵌入一次。
所以，我們可以這樣寫一個(gè)對(duì)話框或模態(tài)框：
function Dialog() {
return React.createPortal( <div>Dialog contents</div>, document.body )
}
一個(gè)新的div會(huì)出現(xiàn)在body內(nèi)部：
一個(gè)完整DEMO:
class Modal extends React.Component {
render() {
const {
visible,
onClose
} = this.props
return visible && ReactDOM.createPortal(<StyledModalRoot>
<div className="box">
Content
<br/>
<button onClick={onClose}>Close</button>
</div>
</StyledModalRoot>, document.body)
}
}
class App extends React.Component {
state = {
visibleModal: false
}
showModal = () => this.setState( { visibleModal: true } )
handleCloseModal = () => this.setState( { visibleModal: false } )
render() {
const { visibleModal } = this.state
return <div style={{padding: '20px'}}>
<button onClick={ this.showModal }>Show Modal</button>
<Modal visible={visibleModal} onClose={ this.handleCloseModal } />
</div>
}
}
const StyledModalRoot = styled.div`
position: fixed;
z-index: 1001;
left: 0;
top: 0;
display: grid;
place-items: center;
width: 100%;
height: 100%;
background: rgba( 0, 0, 0, 0.2 );
>.box {
position: relative;
display: grid;
place-items: center;
width: 80%;
height: 80%;
background: white;
border-radius: 10px;
box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12);
}
`
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react項(xiàng)目如何運(yùn)行在微信公眾號(hào)
這篇文章主要介紹了react項(xiàng)目如何運(yùn)行在微信公眾號(hào)，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
React-Native做一個(gè)文本輸入框組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了React-Native做一個(gè)文本輸入框組件的實(shí)現(xiàn)代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
路由的配置文件目前我們所有的路由定義都是直接使用Route組件，并且添加屬性來完成的，路由的參數(shù)傳遞有二種方式這，兩種方式在Router6.x中都是提供的hook函數(shù)的API,?類組件需要通過高階組件的方式使用，本文通過示例代碼詳解講解，需要的朋友參考下吧2022-11-11
這篇文章主要介紹了React中setState的使用與同步異步的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
webpack 2.x配置reactjs基本開發(fā)環(huán)境詳解
本篇文章主要介紹了webpack 2.x配置reactjs基本開發(fā)環(huán)境詳解，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
使用useMutation和React Query發(fā)布數(shù)據(jù)demo
這篇文章主要為大家介紹了使用useMutation和React Query發(fā)布數(shù)據(jù)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React和Vue實(shí)現(xiàn)文件下載進(jìn)度條
本文主要介紹了React和Vue實(shí)現(xiàn)文件下載進(jìn)度條，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
React如何使用refresh_token實(shí)現(xiàn)無感刷新頁面
本文主要介紹了React如何使用refresh_token實(shí)現(xiàn)無感刷新頁面，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Ant Design與Ant Design pro入門使用教程
Ant Design 是一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系,組件庫是它的 React 實(shí)現(xiàn),antd 被發(fā)布為一個(gè) npm 包方便開發(fā)者安裝并使用,這篇文章主要介紹了Ant Design與Ant Design pro入門,需要的朋友可以參考下2023-12-12
本篇文章主要介紹了詳解React開發(fā)必不可少的eslint配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02