快捷導(dǎo)航

使用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:

點(diǎn)擊運(yùn)行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?Context?變遷及背后實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了React?Context?變遷及背后實(shí)現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo
這篇文章主要為大家介紹了ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
react使用CSS實(shí)現(xiàn)react動(dòng)畫功能示例
這篇文章主要介紹了react使用CSS實(shí)現(xiàn)react動(dòng)畫功能,結(jié)合實(shí)例形式分析了react使用CSS實(shí)現(xiàn)react動(dòng)畫功能具體步驟與實(shí)現(xiàn)方法,需要的朋友可以參考下
2020-05-05
React報(bào)錯(cuò)map()?is?not?a?function詳析
這篇文章主要介紹了React報(bào)錯(cuò)map()?is?not?a?function詳析，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-08-08
一起來學(xué)習(xí)React元素的創(chuàng)建和渲染
這篇文章主要為大家詳細(xì)介紹了React元素的創(chuàng)建和渲染，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
React列表欄及購物車組件使用詳解
這篇文章主要為大家詳細(xì)介紹了React列表欄及購物車組件使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
react hook使用useState更新數(shù)組,無法更新問題及解決
這篇文章主要介紹了react hook使用useState更新數(shù)組,無法更新問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
React拆分窗格組件的兩種方法
這篇文章主要介紹了React拆分窗格組件的兩種方法,使用第三方庫react-split-pane適用于快速實(shí)現(xiàn)拆分窗格功能，并且對(duì)功能和樣式的要求較為簡單的場景，本文結(jié)合示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2023-07-07
React中this丟失的四種解決方法
這篇文章主要給大家介紹了關(guān)于React中this丟失的四種解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
React替換傳統(tǒng)拷貝方法的Immutable使用
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會(huì)返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來減少內(nèi)存占用
2023-02-02