您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“React對話框組件怎么創(chuàng)建”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“React對話框組件怎么創(chuàng)建”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
問題:一是如何在子組件中創(chuàng)建body下的對話框組件,二是如何刪除這個(gè)組件。
接下來我們就一步一步解決這兩個(gè)問題。
我們先寫好dialog組件:(所有的樣式都不寫了,這里實(shí)現(xiàn)一個(gè)原型)
class Dialog extends Component{ constructor(props){ super(props); } render(){ return( <div className="dialog"> <div className="title">{this.props.title}</div> <div className="content">{this.props.children}</div> <div className="button-area"> <a onClick={this.props.onClickCancle.bind(this)} className="btns">取消</a>//這里接收父組件傳遞過來的關(guān)閉對話框的方法 <a className="btns btns-blue">確定</a> </div> </div> ) } }
動(dòng)態(tài)創(chuàng)建組件到body中,react為我們提供了一個(gè)方法:ReactDOM.unstable_renderSubtreeIntoContainer(parent,component,dom),parent一般是this,組件就是對話框組件,dom就是要插入的dom節(jié)點(diǎn)。
根據(jù)這個(gè)方法,我們就可以為對話框?qū)懸粋€(gè)父組件,用于全屏居中顯示:
class DialogCenter extends Component{ constructor(props){ super(props); } appendToBody() { ReactDOM.unstable_renderSubtreeIntoContainer( this, <Dialog title="this is a title!" onClickCancle={this.props.onClickCancle.bind(this)}> <span>這是內(nèi)容內(nèi)容內(nèi)容</span> </Dialog>, this.container ) } componentDidMount() { this.container = document.createElement('div'); $(this.container).addClass("global-hide"); document.body.appendChild(this.container); this.appendToBody() } componentDidUpdate() { this.appendToBody() } componentWillUnmount() { document.body.removeChild(this.container) } render(){ return null; } }
這樣我們就解決了第一個(gè)問題,那么接下來我們要怎樣調(diào)用這個(gè)組件呢?
下面是調(diào)用對話框的父組件
//啟動(dòng)對話框,選擇職業(yè),開始考試 class BeginExamComponent extends Component{ constructor(props){ super(props); } //使用函數(shù)在render中動(dòng)態(tài)創(chuàng)建組件 renderDialog(){ if (this.props.isShow){ console.log("開始創(chuàng)建對話框組件"); return(//將關(guān)閉對話框的方法傳遞下去 <DialogCenter onClickCancle={this.props.onButtonClose.bind(this)}/> ) }else{ return null;//這里實(shí)際上就是所謂的刪除組件 } } render(){ return( <div className="begin-exam-area"> <div className="top-tips">點(diǎn)擊按鈕,請確認(rèn)信息后開始考試</div> <div className="button-wrapper"> <button onClick={this.props.onButtonClick.bind(this)}>開始考試</button>//啟動(dòng)對話框的函數(shù) <button>模擬考試</button> </div> {this.renderDialog()} </div> ) } }
這里我們可以看到,我們使用了一個(gè)renderDialog函數(shù)在render中動(dòng)態(tài)創(chuàng)建對話框組件,之所以可以這樣直接寫進(jìn)去,主要是我們之前的DialogCenter組件實(shí)現(xiàn)了ReactDOM.unstable_renderSubtreeIntoContainer方法,因此這個(gè)組件將會直接在body直接子節(jié)點(diǎn)中渲染。
export class Home extends Component{ constructor(){ super(); this.state={ showDialog:false } } showDialog(){ console.log("調(diào)用對話框"); this.setState({ showDialog:true }) } closeDialog(){ console.log("卸載對話框"); this.setState({ showDialog:false }) } render(){ return( <div> <HomeHeader avatarUid={this.props.account}/> <SearchArea/> <BeginExamComponent onButtonClick={this.showDialog.bind(this)} onButtonClose={this.closeDialog.bind(this)} isShow={this.state.showDialog}/> </div> ) } }
讀到這里,這篇“React對話框組件怎么創(chuàng)建”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。